简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >第九课-媒体查询与flex实战模仿php中文网移动端主页

第九课-媒体查询与flex实战模仿php中文网移动端主页

弋兮
弋兮原创
2019年11月08日 11:41:28736浏览

[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中文网移动端前端页面的能力，但实际操作中仍然有许多不足与不熟练之处，仍需多加练习。

上一条：11月6日作业:用flex弹性容器写一个手机端，圣杯，登录页面下一条：PHP学习第一天:软件安装篇
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多