媒体查询主要是对各种移动端设备的一个响应式兼容，可以在

@media only screen and (min-width: 屏幕宽度最小值) and (max-width: 屏幕宽度最大值){你所要兼容的模块}

中设置你想要的浏览器屏幕大小与浏览器中内容随浏览器的大小改变，来改变自己的整体布局。解决页面乱码问题。

但是我们在遇到不同的设备时我们也需要来设置不同的屏幕宽度，（注：屏幕的高度最好使用100%，这样你的网页在不同的设备上的高度都是满屏的，如果给了固定高度的话，可能出现尾部有空白）以下我来分享几种常见的移动端设备；

/*最大1200px显屏*/@media screen and (max-width : 1200px) {}

/*最大800px显屏*/@media screen and (max-width : 800px) {}

/* 平板电脑和小屏电脑之间的分辨率 */@media (min-width: 768px) and (max-width: 979px) {}

/*最大640px显屏*/@media screen and (max-width : 640px) {}

/* 横向放置的手机及分辨率更小的设备 */@media (max-width: 480px) {}/*iPad横板显屏*/@media screen and (max-device-width: 1024px) and (orientation: landscape) {  }

/*iPad竖板显屏*/@media screen and (max-device-width: 768px) and (orientation: portrait) {  }

/*iPhone 和 Smartphones*/@media screen and (min-device-width: 320px) and (min-device-width: 480px) {  }

在媒体查询的里面注意我们一定不要设置绝对长度，否则你接下来可能会遇到浏览器缩小时出现页面不能跟着浏览器一起缩小的情况。所以我们必须要了解当前的几种浏览器相对长度（rem、em），1.em在布局中是根据父元素的大小来改变大小的；
2.rem
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合（1em = 16px），我们在根元素上一般都会先设置一个大小（例如：font-size：12px），那么我们在计算时就要按照根元素的东西来计算，（例如：设置一个字体大小为16px的样式，{16/12=1.33rem}）
实例：
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta content="yes" name="apple-mobile-web-app-capable">
 6     <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
 7     <meta content="telephone=no" name="format-detection">
 8     <title></title>
 9     <style type="text/css">
10         *{11             margin: 0;
12             padding: 0;
13         }
14           /*根元素*/html {15                   font-family:"微软雅黑";
16                   -ms-text-size-adjust: 100%;
17                   -webkit-text-size-adjust: 100%;
18                   font-size: 62.5%;/*根元素设置字体大小为10，计算（10/16*100%=62.5%）其中的16为浏览器默认的字体大小*/
19               }
20         /*父元素*/  body {21                       font-size:1.4rem;/*父元素设置字体为14px，计算（14/10=1.4rem）*/
22                      -webkit-overflow-scrolling: touch;
23                  }
24         div{25             float: left;
26             width:23%;
27             height: 100px;
28             margin: 0 1%;
29         }
30         #div1{31             background-color: #006699;
32             font-size: 3rem;
33         }
34         #div2{35             background-color: #ff6666;
36             font-size: 3em;
37         }
38         #div3{39             background-color: #ffff00;
40             font-size: 3rem;
41         }
42         #div4{43             background-color: #123456;
44             font-size: 3em;
45         }
46         @media only screen and (min-width: 601px) and (max-width: 980px) {47             div{
48                 width: 48%;
49                 margin: 0 1%;
50             }
51         }
52         @media only screen and (max-width: 600px) {53             div{
54                 width: 96%;
55                 margin: 0 2%;
56             }
57         }
58     </style>
59 </head>
60 <body>
61 <div id="div1">大大</div>
62 <div id="div2">鹅鹅</div>
63 <div id="div3">反反</div>
64 <div id="div4">灌灌</div>
65 </body>
66 </html>


当然在响应式布局中除了这些以外，我们值得注意的地方还有很多的，例如meta标签的设置上也有很多地方值得我们注意的，一般响应式布局上我们引入这个meta标签
                                                                       <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>  `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边
  1. width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
  2. height：高度（数值 / device-height）（范围从223 到10,000）
  3. initial-scale：初始的缩放比例 （范围从>0 到10）
  4. minimum-scale：允许用户缩放到的最小比例
  5. maximum-scale：允许用户缩放到的最大比例
  6. user-scalable：用户是否可以手动缩 (no,yes)
  • WebApp全屏模式：伪装app，离线应用
  • <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->
  • 隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。
  • <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  • 忽略数字自动识别为电话号码
                                                                                              <meta content="telephone=no" name="format-detection" />
  • 忽略识别邮箱
                                                                                                 <meta content="email=no" name="format-detection" />
  • 添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner。
                                                                                          <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> 

 其他的一些meta标签使用方法

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

转载于:https://www.cnblogs.com/Victory-peng/articles/5458786.html

响应式布局之媒体查询相关推荐

  1. html响应式布局_媒体查询

    html响应式布局_媒体查询 1 在html页面中根据不同的屏幕尺寸引入不同的css样式文件 <link href="styl1.css" type="text/c ...

  2. 计算机常用屏幕分辨率,pc端常用电脑屏幕 （(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...

    PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率   比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3  | 10.4寸.12.1寸.1 ...

  3. pc显示器分辨率 前端_@media 响应式PC端媒体查询屏幕分辨率尺寸总结

    最近在写一个PC端的活动页面,想让页面适配不同的分辨率,既然提出了这样的需求,那么我们就要去尽量满足.因为之前一直写的是固定版心,然后在将容器居中,这样写的话,就导致页面在低分辨屏幕下会出现横向的滚动 ...

  4. 移动Web第七天（响应式网页：媒体查询、BootStrap）

    文章目录 一.媒体查询 二.BootStrap 1.UI框架 2.BootStrap简介 3.BootStrap使用步骤 4.BootStrap栅格系统 5.全局样式 6.组件 7.Glyphicon ...

  5. 响应式网页之媒体查询

    由于现在的网页要兼容各种pc尺寸及ipad甚至手机屏幕,所以响应式的网页变得尤为重要.手写响应式网页,具体技术点有: 1.声明viewport元标签(响应式网页必备)        <meta ...

  6. 响应式 Web 设计 - 媒体查询

    媒体(media)查询在 CSS3 上有介绍:CSS3 @media 查询. 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. 实例 如果浏览器窗口小于 500px, 背景将变为浅蓝 ...

  7. React写响应式官方网站-媒体查询

    github地址 演示地址 帮朋友写一个官网,想着自己的技术栈是react,就用react框架加上bootstrap的UI框架借助媒体查询来适配,简单写了一个可以用作官方网站的东西.写了pc和移动端的 ...

  8. pc端ui图片尺寸_pc端常用电脑屏幕 （(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...

    PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率   比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3  | 10.4寸.12.1寸.1 ...

  9. 现在计算机常用的分辨率,pc端常用电脑屏幕 （(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...

    PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率   比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3  | 10.4寸.12.1寸.1 ...

最新文章

  1. 从 no-code 到 low-code 再到 pro-code
  2. oracle创建序列seq起始值为1_oracle 重置序列从指定数字开始的方法详解
  3. 网络营销外包中那些超有效的网络营销方法有进一步了解过吗？
  4. Android图片360全景旋转
  5. 单片机联网,UIP实现tcp/udp协议
  6. 学习笔记01：1.1 基于概率的信任
  7. .NET开发框架(四)-服务器IIS实践教程
  8. LeetCode 题 - 69. x 的平方根 python解法
  9. Linux思维导图及命令速查表8张
  10. 【Python】 [基础] 条件判断 与 循环 与dict和set
  11. linux已使用线程,在Linux中使用线程
  12. mysql设置显示结果_php 与mysql配置,让页面显示结果
  13. Atitit.编程语言and 自然语言的比较and 编程语言未来的发展
  14. atitit.Atitit. Gui控件and面板-----服务端控件 java struts的实现最佳实践
  15. TWaver可视化软件（七） WEB组态可视化软件
  16. Vue源码解析系列——响应式原理篇：理解Dep类和Watcher类
  17. c语言股票最大收益_应用ROC函数计算多支股票收益率
  18. 总结:python paramiko winrm
  19. 微软将与美国第二大杂货连锁店展开合作 以抵抗亚马逊
  20. 【人生苦短，我学 Python】基础篇——字典（Day10）

热门文章

  1. pwnable.kr第七八题 input leg
  2. java聊天室数据库_课内资源
  3. java计算机毕业设计基于ssm的网上跳蚤市场高校二手闲置交易网站
  4. 《软件功能测试自动化实战教程》—第6章6.4节Action测试输入的参数化
  5. 1231 统计闰年（1）
  6. 微信相框plus详细体验
  7. Ubuntu把在效劳器领域起更主要的脚色
  8. MyBatis-Plus Generator v3.5.1 最新代码自动生成器
  9. winhex改宽高和伪加密
  10. I/O复用：select、poll和epoll函数