网页响应式媒体查询

　　前言：第一次写博客，还请各位前辈批评，指点，丢石头给我，感谢前辈和同行的指点！　　

　　涉世尚浅，才开始工作第三天，就接到了一个PC端直播间项目，还要求响应式的啊！对于当时的我，近一年多没碰过前端代码了(小生我转行的 iOS混不下去了)，这有什么办法。第一次做响应式，只记得学校学过一个百分比布局，其他没了，什么内容自适应、字体大小、代码冗余、后期维护这些都没考虑。反正是先做出来了再说，最后做出来，无颜面对江东父老了，后期自己一边修改一边骂，SB啊 当时..SB啊 当时.

　　不废话了，说说我做完直播间的收获，分享下

1）媒体查询 @media 是个好东西，至少对像我一样刚入行的小前端做响应式是个不错的选择。

①我们来看看媒体查询 页面最大宽度的标准写法　　　 

1 @media screen and (max-width: 960px){
2    　    body{
3         　　　background: #000000;
4 　　　　　　　font-size:14px;
5 　　　　　　　...
6     }
7 }

解读下代码意思：当页面宽度小于960px时，使用以下对应样式表.

备注：screen 意思是告知设备在打印页面时使用无衬线体，屏幕上显示也用无衬线字体，现在你会去打印一张网页吗？不会吧！所以目前网站都不会考虑用户去打印网站页面，so...screen可以不用写，直接省去.

②这是媒体查询 页面最小宽度的标准写法　　 

1 @media screen and (min-width:960px){
2     　　body{
3        　　　background:#000000;
4 　　　　　　　font-size:14px;
5 　　　　　　　...
6     }
7 }

代码意思：当页面宽度大于960px时，使用以下对应样式表.

③当然我们也可以媒体查询一个页面区间宽度，　　　

1 @media screen and (min-width:960px) and (max-width:1200px){
2 　　　body{
3        　　　background:#000000;
4 　　　　　　　font-size:14px;
5 　　　　　　　...
6     　　}
7 }

上面代码大概意思是：当页面宽度大于960px，小于1200px时([960px,1200px])，使用以下样式表.

④ 媒体查询的其他参数　　

以上是我们在开发过程中常用到的三种媒体查询特性小于、大于、等于，除此之外她还有其他特性，下面是我查找总结媒体查询的其他参数和用法.

　　　　　　width/height：浏览器可视宽度(也叫视口)/浏览器可见高度.

　　　　　　device-width/device-height：设备屏幕宽度/设备屏幕高度.

　　　　　  color:检测颜色的位数。（例如：min-color:32  就是检测设备是否拥有32位颜色 #000000）

　　　　　  color-index:检查设备索引颜色表中的颜色(颜色值不能小于0)。

　　　　　　orientation：判断当前设备是横屏还是竖屏.

　　　　　  aspect-ratio:检测浏览器可视宽度和高度的比例。(现在宽高比为16:9是最佳的，比如我做的直播窗口，要求宽高比就是16:9)

　　　　　　device-aspect-ratio:检测设备的宽度和高度的比例。

　　　　　  resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。

　　　　　  grid：检测输出的设备是网格设备的还是位图设备。

　　　　　  monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个很少用得到）

　　2）媒体查询的"局限性"

　　　我要说的这个局限性，指的是它不能用在IE8以下，IE8以下就不说了，它目前应该被前端骂的是 身残志坚了，IE8以下了 既不支持HTML5，也不支持CSS3的媒体查询，这个怎么搞...IE8以下放弃算求，但是有些公司，用户又不多啊，非得要求你小前端要响应式IE8以下，还好可以在项目中导入Respond.js，这样使用CSS3的媒体查询就有作用了，对于这个Respond.js，小生没实打实的用过，在这里闲扯了下，分享一篇知乎上关于这个Respond.js用法的文章给大家：https://www.zhihu.com/question/21634225

　　3）实现响应式网页，不止CSS3的媒体查询能做

　　　　1. Bootstrap：

　　　　   对于这些框架，我感觉都怕用，因为它里面所有标签的样式都有，你引用就好了，是节省了开发时间。对于我来说，有点难把握，做完移动端网站我就有点后悔用了它，要说，不管什么，会写源生的才是最Nice的.

　　　　2. JS监听视口宽度变化从而动态更换CSS样式表，达到最佳的响应式：

　　　　   这种方式，应该是很多攻城狮都喜欢用的，因为它精确，对于代码冗余，后期维护这些都比较友好，你要知道，攻城狮一般都很强调用户体验的.

 　　　等等...

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有