Kandungan halaman utama pembangunan responsif H5 (4)

Pelarasan penyesuaian fon web

Halaman utama kami telah ditulis sebelum ini, tetapi sebagai halaman penyesuaian, apabila halaman kami mengecil, Saiz fon pada peranti berbeza tidak berubah kerana sebab gaya Ia masih saiz fon PC Untuk menyesuaikan dengan saiz peranti yang berbeza, kita perlu menilai saiz fon halaman.

@media:

Menggunakan pertanyaan @media, anda boleh menentukan gaya berbeza untuk jenis media yang berbeza.

@media boleh menetapkan gaya yang berbeza untuk saiz skrin yang berbeza, terutamanya jika anda perlu menyediakan halaman responsif, @media sangat berguna.

Apabila anda menetapkan semula saiz penyemak imbas, halaman itu juga akan dipaparkan semula berdasarkan lebar dan ketinggian penyemak imbas.

/*小屏幕 大于等于768px*/
@media (min-width: 768px) {
    .tab-h2{
        font-size: 26px;
    }
    .tab-p{
        font-size: 16px;
    }
    .text h3{
        font-size: 22px;
    }
    .text p{
        font-size: 16px;
    }
}
/*中等屏幕 大于等于992px*/
@media (min-width: 992px) {
    .tab-h2{
        font-size: 28px;
    }
    .tab-p{
        font-size: 17px;
    }
    .text h3{
        font-size: 24px;
    }
    .text p{
        font-size: 18px;
    }
}
/*大屏幕 大于等于1200px*/
@media (min-width: 1200px) {
    .tab-h2{
        font-size: 30px;
    }
    .tab-p{
        font-size: 18px;
    }
    .text h3{
        font-size: 26px;
    }
    .text p{
        font-size: 19px;
    }
}

Kami telah melaraskan saiz perenggan fon apabila resolusi skrin lebih besar daripada 768px, lebih besar daripada 992px dan lebih besar daripada 1200px. Ini juga sebab mengapa dalam era ini, reka letak halaman web yang sama boleh dipaparkan dengan sewajarnya pada peranti yang berbeza Apabila resolusi skrin kami berbeza, saiz fon halaman web saya juga akan berbeza.

Kesukaran bab ini

Tetapkan saiz fon yang berbeza untuk resolusi skrin yang berbeza
@Penggunaan media

bahagian seterusnya

fail baharu

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
 <title>PHP中文网</title>
 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

 <style>
 body {
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

 }
 #myCarousel{
 margin: 50px 0 0 0;
 }
 .logo{
 padding: 0;
 }
 .daohang{
 margin-top: 0;
 }
 .carousel-inner img{

 margin: 0 auto;
 }
 .tab-h2{
 font-size: 30px;
 text-align: center;
 color: #0059b2;
 }
 .tab-p{
 font-size: 18px;
 text-align: center;
 letter-spacing: 1px;
 color: #999;
 margin: 20px 0 40px 0 ;
 }
 .tab1{
 margin: 30px 0;
 color: #666;

 }
 .tab1 .text-muted{
 color: #999;
 text-decoration: line-through;
 }
 .tab1 .media-heading{
 margin: 5px 0 20px 0 ;
 }
 .tab1 .col{
 padding: 20px;
 }
 .tab2{
 background-color: #eee;
 padding: 60px 20px;
 text-align: center;
 }
 .tab2 img{
 width: 40%;
 height: 40%;
 }
 .tab3{
 padding: 40px 0 ;
 text-align: center;
 }
 .tab3 img{
 width: 40%;
 height: 30%;
 }
 .text h3{
 font-size: 26px;
 }
 .tab4{
 background-color: #eee;
 padding: 60px 20px;
 text-align: center;
 }
 .tab4 img{
 width: 40%;
 height: 40%;
 }
 .tab5{
 padding: 40px 0 ;
 text-align: center;
 }
 .tab5 img{
 width: 40%;
 height: 30%;
 }
 .text h4{
 font-size: 26px;
 }
 .text{
 padding-top: 20px;
 }
 .text p{

 font-size: 18px;
 }
 #footer{
 color: white;
 background-color: #000000;
 border-top: 1px solid #ccc;
 padding: 20px;
 text-align: center;
 }
 /*小屏幕 大于等于768px*/
 @media (min-width: 768px) {
 .tab-h2{
 font-size: 26px;
 }
 .tab-p{
 font-size: 16px;
 }
 .text h3{
 font-size: 22px;
 }
 .text p{
 font-size: 16px;
 }
 }
 /*中等屏幕 大于等于992px*/
 @media (min-width: 992px) {
 .tab-h2{
 font-size: 28px;
 }
 .tab-p{
 font-size: 17px;
 }
 .text h3{
 font-size: 24px;
 }
 .text p{
 font-size: 18px;
 }
 }
 /*大屏幕 大于等于1200px*/
 @media (min-width: 1200px) {
 .tab-h2{
 font-size: 30px;
 }
 .tab-p{
 font-size: 18px;
 }
 .text h3{
 font-size: 26px;
 }
 .text p{
 font-size: 19px;
 }
 }

 </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
 <div class="container">
 <div class="navbar-header">
 <a href="#" class="navbar-brand logo" ><img src="https://img.php.cn/upload/course/000/000/004/5819475ea4910787.png" height="50" alt="PHP中文网"></a>
 <button type="button"class="navbar-toggle"data-toggle="collapse" data-target="#navbar-collapse">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 </div>
 <div class="collapse navbar-collapse"id="navbar-collapse">
 <ul class="nav navbar-nav navbar-right daohang " >
 <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
 <li><a href="#"><span class="glyphicon glyphicon-bookmark"></span> 资讯</a></li>
 <li><a href="#"><span class="glyphicon glyphicon-fire"></span> 实例</a></li>
 <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 关于我们</a></li>
 </ul>
 </div>
 </div>
</nav>
<div id="myCarousel" class="carousel slide">
 <!-- 轮播（Carousel）指标 -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>
 <!-- 轮播（Carousel）项目 -->
 <div class="carousel-inner">
 <div class="item active" style="background: #E2DACF">
 <img src="https://img.php.cn/upload/course/000/000/004/58195a76b3e4e324.jpg" alt="第一张">
 </div>
 <div class="item" style="background: #000000">
 <img src="https://img.php.cn/upload/course/000/000/004/58195a9240209277.jpg" alt="第二张">
 </div>
 <div class="item" style="background: #FEDF85">
 <img src="https://img.php.cn/upload/course/000/000/004/58195abe6d829108.jpg" alt="第三章">
 </div>
 </div>
 <!-- 轮播（Carousel）导航 -->
 <a class="carousel-control left" href="#myCarousel"
 data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="carousel-control right" href="#myCarousel"
 data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a>
</div>
</div>
<div class="tab1">
 <div class="container">
 <h2 class="tab-h2">为什么选择在PHP中文网学习编程？</h2>
 <p class="tab-p">PHP中文网有着海量的编程资源，在线答疑，专人解惑。</p>
 <div class="row">
 <div class="col-md-6 col" >
 <div>
 <div class="media-left">
 <a href=""><img src="https://img.php.cn/upload/course/000/000/004/581ae307c59ff537.jpg" class="media-object" alt=""></a>
 </div>
 <div class="media-body">
 <h4 class="media-heading">学习质量</h4>
 <p class="text-muted">其他教育视频网站的资源杂乱，内容缺失，课程不完整，自学难度大。</p>
 <p>PHP中文网的课程及时的更新，让我们自学的学员有更好的路线。</p>

 </div>
 </div>
 </div>
 <div class="col-md-6 col">
 <div class="media-left">
 <a href=""><img src="https://img.php.cn/upload/course/000/000/004/581ae307c59ff537.jpg" class="media-object" alt=""></a>
 </div>
 <div class="media-body">
 <h4 class="media-heading">师资力量</h4>
 <p class="text-muted">其他教育视频网站的资源杂乱，内容缺失，课程不完整，自学难度大。</p>
 <p>PHP中文网的课程及时的更新，让我们自学的学员有更好的路线。</p>

 </div>
 </div>
 <div class="col-md-6 col" >
 <div class="media-left">
 <a href=""><img src="https://img.php.cn/upload/course/000/000/004/581ae307c59ff537.jpg" class="media-object" alt=""></a>
 </div>
 <div class="media-body">
 <h4 class="media-heading">学习安排</h4>
 <p class="text-muted">其他教育视频网站的资源杂乱，内容缺失，课程不完整，自学难度大。</p>
 <p>PHP中文网的课程及时的更新，让我们自学的学员有更好的路线。</p>

 </div>
 </div>
 <div class="col-md-6 col" >
 <div class="media-left">
 <a href=""><img src="https://img.php.cn/upload/course/000/000/004/581ae307c59ff537.jpg" class="media-object" alt=""></a>
 </div>
 <div class="media-body">
 <h4 class="media-heading">服务团队</h4>
 <p class="text-muted">其他教育视频网站的资源杂乱，内容缺失，课程不完整，自学难度大。</p>
 <p>PHP中文网的课程及时的更新，让我们自学的学员有更好的路线。</p>

 </div>
 </div>
 </div>
 </div>
</div>
<div class="tab2">
 <div class="container">
 <div class="row">
 <div class="text col-md-6 col-sm-6">
 <h3>师资力量</h3>
 <p>PHP中文网的课程及时的更新，让我们自学的学员有更好的路线。</p>
 </div>
 <div class="col-md-6">
 <img src="https://img.php.cn/upload/course/000/000/004/581ae02a3af3d343.jpg" class="img-responsive center-block" alt="">
 </div>
 </div>
 </div>
</div>
<div class="tab3">
 <div class="container">
 <div class="row">
 <div class="col-md-6 ">
 <img src="https://img.php.cn/upload/course/000/000/004/581ae2d64702c292.png" class="img-responsive center-block" alt="">
 </div>
 <div class=" text col-md-6 col-sm-6">
 <h3>学习体系</h3>
 <p>PHP中文网的课程及时的更新，让我们自学的学员有更好的路线。</p>
 </div>
 </div>
 </div>
</div>
<div class="tab4">
 <div class="container">
 <div class="row">
 <div class="text col-md-6 col-sm-6">
 <h3>师资力量</h3>
 <p>PHP中文网的课程及时的更新，让我们自学的学员有更好的路线。</p>
 </div>
 <div class="col-md-6">
 <img src="https://img.php.cn/upload/course/000/000/004/581ae02a3af3d343.jpg" class="img-responsive center-block" alt="">
 </div>
 </div>
 </div>
</div>
<div class="tab5">
 <div class="container">
 <div class="row">
 <div class="col-md-6 ">
 <img src="https://img.php.cn/upload/course/000/000/004/581ae2d64702c292.png" class="img-responsive center-block" alt="">
 </div>
 <div class=" text col-md-6 col-sm-6">
 <h3>学习体系</h3>
 <p>PHP中文网的课程及时的更新，让我们自学的学员有更好的路线。</p>
 </div>
 </div>
 </div>
</div>
<footer id="footer">
 <div class="container">
 <p>自学路线 | 合作相关 | 投诉建议</p>
 <p> 2016 PHP中文网企业网站.powered by Bootstrap.</p>
 </div>
</footer>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
 $(function () {

 //轮播自动播放
 $('#myCarousel').carousel({
 //自动4秒播放
 interval : 4000,
 });
 });
</script>

</body>
</html>

serahkan Tetapkan Semula Kod

Operasi automatik

Skrin penuh