Contenu de la page d'accueil du développement réactif H5 (4)

Ajustement adaptatif des polices Web

Notre page d'accueil a déjà été écrite, mais comme une page adaptative, lorsque notre page rétrécit, la taille de la police sur différents appareils ne change pas pour des raisons de style. Il s'agit toujours de la taille de la police du PC. Afin de s'adapter à la taille des différents appareils, nous devons juger de la taille de la police de la page.

@media :

À l'aide de la requête @media, vous pouvez définir différents styles pour différents types de médias.

@media peut définir différents styles pour différentes tailles d'écran, surtout si vous devez configurer une page réactive, @media est très utile.

Lorsque vous réinitialisez la taille du navigateur, la page sera également restituée en fonction de la largeur et de la hauteur du navigateur.

/*小屏幕 大于等于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;
    }
}

Nous avons ajusté la taille des paragraphes de police lorsque la résolution de l'écran est supérieure à 768px, supérieure à 992px et supérieure à 1200px. C'est également la raison pour laquelle, à notre époque, la même mise en page Web peut être affichée de manière appropriée sur différents appareils. Lorsque nos résolutions d'écran sont différentes, la taille de la police de ma page Web sera également différente.

Difficultés de ce chapitre

Définir différentes tailles de police pour différentes résolutions d'écran
@media Utiliser

Formation continue

nouveau fichier

<!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">  <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>  <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>  <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>

soumettre Réinitialiser le code

Opération automatique

Contenu de la page d'accueil du développement réactif H5 (4)

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]