对响应式布局的理解和认知

Posted 2020-10-13

随着互联网的快速发展，html5迅速崛起，响应式布局也慢慢的被广泛的运用起来，身为之后的Web前端人员，我觉得应该要掌握“响应式布局”。
　　响应式布局，简单点说就是做一个网站而能多终端多平台运行的由一个网站转化为多个网站，为我们大大节省了资源。
　　那么响应式布局有什么优缺点呢？
优点：　　1.响应式布局面对不同的分辨率设备灵活性强。
　　　　　2.能够快捷解决多设备显示适应问题。
缺点：
　　　　1.兼容各种设备工作量大，效率低下。
　　　　 2.代码累赘，会出现隐藏无用的元素，加载时间加长。
　　　　 3.其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果。
　　　　 4.一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。
　         　可能有些人还是不明白响应式布局应该怎么去做，以及它的开发原理是什么？

原理：简单点说响应式布局它是通过CSS中Media Query @media功能来判断沃恩的终端设备宽度是多少像素，然后执行对应的CSS样式。   
所有网页响应式布局代码都是这一句：
　　<meta name="viewport" content="width=device-width,
　 initial-scale=1.0, maximum-scale=1.0,user-scalabe=0">
解析：
　　width:赋值为固定像素或者某个特殊的值,比如device-width.
　　指的是100%时的像素
　　height:和width一样
　　initial-scale=1.0,第一次加载网页时显示的比例.
　　maximum-scale=1.0:允许用户手动缩放的最大比例
　　user-scalable=0.值为0代表不允许用户手动缩放.
　　这段代码的意思是:
　　让viewport的分辨率等于物理设备上的真实分辨率,
　　不允许用户修改,可以保证显示效果真实细腻.
media query能够获取哪些值?
设备的宽和高device-width，device-heigth显示屏幕/触觉设备。
渲染窗口的宽和高width，heigth显示屏幕/触觉设备。
设备的手持方向，横向还是竖向orientation(portrait|lanscape)和打印机等。
画面比例aspect-ratio点阵打印机等。
设备比例device-aspect-ratio-点阵打印机等。
对象颜色或颜色列表color，color-index显示屏幕。
设备的分辨率resolution。