简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 第九课-媒体查询与flex实战模仿php中文网移动端主页
Blogger Information
Blog 10
fans 1
comment 0
visits 9716
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第九课-媒体查询与flex实战模仿php中文网移动端主页
弋兮
Original
724 people have browsed it

[top]

一、媒体查询

媒体查询用来针对不同的屏幕显示对应的页面布局，
一般来讲，对于手机端宽度为320px-768px;
对于平板端宽度为768px-992px;
对于pc端宽度为：992px-1200px。
@media (min-width:) and (max-width: ){此处写css样式}.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!--  设置视口:        可视宽 度等于设置宽度, 禁用用户缩放,初始缩放为1,最大为1,最小也为1-->
  7.     <meta name="viewport"
  8.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  9.     <!--    简单理解就是: 显示窗口的宽度就是客户端设备的宽度(自动全屏), 显示的内容初始比例全部是1-->
  10.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  11.     <!--    IE8以上可以识别,这是一种兼容写法,指示IE浏览器使用最高级的模式进行页面渲染, 简单的说就是自动匹配当前IE的版本-->
  12.     <title>媒体查询简介</title>
  13.     <style>
  14.         /*默认导航图标不显示*/
  15.         .nav-ico {
  16.             display: none;
  17.         }
  18.         @media (max-width: 768px) {
  19.             body {
  20.                 background-color: lightpink;
  21.             }
  23.             /*关闭左侧导航*/
  24.             .nav {
  25.                 display: none;
  26.             }
  28.             /*显示移动菜单图标*/
  29.             .nav-ico {
  30.                 display: block;
  31.             }
  33.             .nav-ico img {
  34.                 width: 30px;
  35.                 height: 30px;
  36.                 float: right;
  37.             }
  38.         }
  40.         @media (min-width: 768px) and (max-width: 992px) {
  41.             body {
  42.                 background-color: lightblue;
  43.             }
  45.         }
  47.         @media (min-width: 992px) {
  48.             body {
  49.                 background-color: lightgreen;
  50.             }
  51.         }
  54.     </style>
  55. </head>
  56. <body>
  57. <!--媒体就是浏览网页的设备,主要有三类: 手机, 平板, PC-->
  58. <!--所以, 大致将屏幕宽度分为三类:-->
  59. <!--1. 0 - 768px: 手机, 移动端-->
  60. <!--2. 768 - 992: 平板-->
  61. <!--3. 992 -1200 或 1200 +, PC-->
  63. <div class="nav" style="float: left">
  64.     <ul>
  65.         <li><a href="">首页</a></li>
  66.         <li><a href="">新闻</a></li>
  67.         <li><a href="">产品</a></li>
  68.         <li><a href="">联系</a></li>
  69.     </ul>
  70. </div>
  72. <div class="nav-ico"><a href=""><img src="static/font-icon/zhuye.png" alt=""></a></div>
  74. <div class="content" style="float:left;">
  75.     <ul>
  76.         <li><a href="">最新公司产品1</a></li>
  77.         <li><a href="">最新公司产品2</a></li>
  78.         <li><a href="">最新公司产品3</a></li>
  79.         <li><a href="">最新公司产品4</a></li>
  80.         <li><a href="">最新公司产品5</a></li>
  81.         <li><a href="">最新公司产品6</a></li>
  82.         <li><a href="">最新公司产品7</a></li>
  83.         <li><a href="">最新公司产品8</a></li>
  84.         <li><a href="">最新公司产品9</a></li>
  85.         <li><a href="">最新公司产品10</a></li>
  86.     </ul>
  87. </div>
  90. </body>
  91. </html>

预览如图：


手抄：

二、仿php中文网手机版首页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>php中文网移动端</title>
  8.     <link rel="stylesheet" href="css/demo2.css">
  9. </head>
  10. <body>
  11.     <header>
  12.         <a href=""><img src="static/images/user-pic.jpeg" alt=""></a>
  13.         <a href=""><img src="static/images/logo.png" alt=""></a>
  14.         <a href=""><img src="static/images/user-nav.jpg" alt=""></a>
  15.     </header>
  16.     <div class="banner">
  17.         <img src="static/images/banner.jpg" alt="">
  18.     </div>
  19.     <nav>
  20.             <ul>
  21.                 <li>
  22.                     <a href="">
  23.                         <img src="static/images/html.png" alt="">
  24.                         <span>HTML/CSS</span>
  25.                     </a>
  26.                 </li>
  27.                 <li>
  28.                     <a href="">
  29.                         <img src="static/images/JavaScript.png" alt="">
  30.                         <span>JavaScript</span>
  31.                     </a>
  32.                 </li>
  33.                 <li>
  34.                     <a href="">
  35.                         <img src="static/images/code.png" alt="">
  36.                         <span>服务端</span>
  37.                     </a>
  38.                 </li>
  39.                 <li>
  40.                     <a href="">
  41.                         <img src="static/images/sql.png" alt="">
  42.                         <span>数据库</span>
  43.                     </a>
  44.                 </li>
  45.             </ul>
  46.             <ul>
  47.                 <li>
  48.                     <a href=""><img src="static/images/app.png" alt="">
  49.                         <span>移动端</span>
  50.                     </a>
  51.                 </li>
  52.                 <li>
  53.                     <a href="">
  54.                         <img src="static/images/manual.png" alt="">
  55.                         <span>手册</span>
  56.                     </a>
  57.                 </li>
  58.                 <li>
  59.                     <a href=""><img src="static/images/tool2.png" alt="">
  60.                         <span>工具</span>
  61.                     </a>
  62.                 </li>
  63.                 <li>
  64.                     <a href="">
  65.                         <img src="static/images/live.png" alt="">
  66.                         <span>直播</span>
  67.                     </a>
  68.                 </li>
  69.             </ul>
  70.         </nav>
  71.     <div class="tj">
  72.         <span>推荐课程</span>
  73.         <div class="tj1">
  74.                 <a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
  75.                 <a href=""><img src="static/images/tjkc2.jpg" alt=""></a>
  76.         </div>
  78.         <div class="ss">
  79.                 <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
  80.                 <span>
  81.                     <a href="">CI框架30分钟极速入门</a>
  82.                     <span><i>中级</i>49738次播放</span>
  84.                 </span>
  85.         </div>
  86.         <div  class="ss">
  87.                <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
  88.                 <span>
  89.                     <a href="">2018前端入门基础</a>
  90.                     <span><i>初级</i>209952次播放</span>
  91.                     </span>
  92.         </div>
  93.     </div>
  94.     <div class="zs">
  95.     <div>
  96.         <span class="gx">最近更新</span>
  97.         <span>
  98.             <img src="static/images/1.jpg" alt="">
  99.             <span class="ms">
  100.                 <span>2019python自学视频</span>
  101.                 <span>本课程适合想从零开始学习 Python...</span>
  102.                 <div class="ms1"><i>初级</i><div>1882次播放</div></div>
  103.             </span>
  104.         </span>
  105.     </div>
  107.     <div>
  109.         <span>
  110.             <img src="static/images/4.jpg" alt="">
  111.             <span class="ms">
  112.                 <span>2019python自学视频</span>
  113.                 <span>本课程适合想从零开始学习 Python...</span>
  114.                 <div class="ms1"><i>初级</i><div>1882次播放</div></div>
  115.             </span>
  116.         </span>
  117.     </div>
  118.     <div>
  119. <span>
  120.             <img src="static/images/2.jpg" alt="">
  121.             <span class="ms">
  122.                 <span>2019python自学视频</span>
  123.                 <span>本课程适合想从零开始学习 Python...</span>
  124.                 <div class="ms1"><i>初级</i><div>1882次播放</div></div>
  125.             </span>
  126.         </span>
  127.     </div>
  128.     <div>
  129.         <span>
  130.             <img src="static/images/3.jpg" alt="">
  131.             <span class="ms">
  132.                 <span>2019python自学视频</span>
  133.                 <span>本课程适合想从零开始学习 Python...</span>
  134.                 <div class="ms1"><i>初级</i><div>1882次播放</div></div>
  135.             </span>
  136.         </span>
  137.     </div>
  138.     </div>
  139. </body>
  140. </html>

对应css：

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body{
  6.     display: flex;
  7.     flex-flow:column nowrap;
  8.     background-color:#EDEFF0;
  9. }
  10. header{
  11.     direction: fixed;
  12.     display: flex;
  13.     justify-content: space-between;
  14.     align-items: center;
  15.     min-width: 320px;
  16.     max-width: 768px;
  17.     background-color: #2D353C;
  18.     width: 100%;
  19. }
  20. header>a:first-child>img,
  21. header>a:last-child>img{
  23.     width: 26px;
  24.     height: 26px;
  25.     margin: 5px;
  26.     border-radius: 50%;
  27. }
  28. header>a:nth-child(2)>img{
  29.     width: 94px;
  30. }
  31. .banner{
  32.     display: flex;
  33.     /* width: 200px; */
  34.     max-width: 768px;
  35.     height: 120px;
  36. }
  37. img{
  38.     width: 100%;
  39. }
  40. nav{
  41.     display: flex;
  42.     flex-flow: column nowrap;
  43.     background-color: white;
  44. }
  45. nav img{
  46.     width: 45px;
  47.     height: 49px;
  48. }
  49. nav ul{
  50.     display: flex;
  51.     /* justify-content: space-around;
  52.     margin: 10px 0; */
  53.     align-items: center;
  54. }
  55. nav ul li{
  56.     flex: 1;
  57. }
  58. nav ul li a{
  59.     display: flex;
  60.     flex-flow: column nowrap;
  61.     align-items: center;
  62.     margin: 10px;
  63. }
  64. a{
  65.     text-decoration: none;
  66. }
  67. ul{
  68.     list-style-type: none;
  69. }
  70. .tj{
  71.     display: flex;
  72.     box-sizing: border-box;
  73.     flex-flow: column nowrap;
  74.     margin-top: 15px;
  75.     padding: 5px;
  76. }
  77. .tj1{
  78.     display: flex;
  79.     margin-top: 5px;
  82. }
  83. .tj>span{
  84.     background-color: #EDEFF0;
  85.     color: black;
  86.     margin-left: 5px;
  87. }
  88. .tj1>a{
  89.     margin: 3px;
  90. }
  91. .ss{
  92.     display: flex;
  93.     background-color: #fff;
  94.     box-sizing: border-box;
  96. }
  97. .ss>span{
  98.     display: flex;
  99.     flex-flow: column nowrap;
  100.     margin: 25px;
  101.     padding: 5px;
  102.     position: relative;
  103.     left: -125px;
  105. }
  106. .ss img{
  107.     height: 90px;
  108.     width: 70%;
  109.     padding: 5px;
  110. }
  111. .ss a{
  112.     color: black;
  113.     /* position: relative; */
  114. }
  115. .ss>span>span{
  116.     margin-top:20px
  117. }
  118. .zs{
  119.     display: flex;
  120.     flex-flow: column nowrap;
  121. }
  122. .zs>div{
  123.     display: flex;
  124.     flex-flow: column nowrap;
  125.     padding: 10px;
  126.     background-color: #fff;
  127.     margin: 10px;
  128. }
  130. .zs img{
  131.     height: 90px;
  132.     width: 40%;
  133. }
  134. .zs>div>span:last-of-type{
  136.     display: flex;
  138. }
  139. .gx{
  140.     margin: 6px;
  141.     font-size: 21px;
  142. }
  143. .ms{
  144.     margin: 6px;
  145.     display: flex;
  146.     flex-flow: column nowrap;
  147. }
  148. .ms>span{
  149.     margin: 5px;
  150. }
  151. .ms1{
  152.     display: flex;
  153.     justify-content:space-between;
  154. }
  155. .ms1>i{
  156.     background-color: rgb(51, 51, 51);
  157.     border: 0;
  158.     color: white;
  159.     font-weight: lighter;
  160.     border-radius: 20px;
  161. }

预览图：

手抄：

三、总结

本次课程学习了媒体查询方法，写在媒体查询里的样式会在指定的屏幕宽度下显示，完成对不同客户端的适应。
并且结合了之前学习的知识，主要用flex来仿php中文网移动端的首页，两周的学习已让我具备实现php中文网移动端前端页面的能力，但实际操作中仍然有许多不足与不熟练之处，仍需多加练习。

Correction status：qualified

Teacher's comments：剩下就是干了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！