移动端常用的四种响应模式

移动优先的响应式布局采用的是渐进增强原则，制作响应式网站时，先搞定手机版，然后再去为更大设备去设计和开发更复杂的功能。特征是使用min-width匹配页面宽度。从上到下书写样式时，首先考虑的是移动设备的使用场景，默认查询的是最窄的情况，再依次考虑设备屏幕逐渐变宽的情况

　　由简入繁易，由繁入简难。如果是桌面优先，布局端是桌面端代码，只有在media中，才是手机端代码，加载了多余的桌面端代码。如果是图片文件，则下载的无用资源更多

　　无论从界面设计还是代码执行效率的角度而言，移动优先都有明显优势

下面介绍四种响应模式

【Column Drop 列下沉】

　　手机上每一个大块单独占据一行，随着屏幕尺寸拉伸会在同一行上形成多个 column 列

【Mostly Fulid 基本流体式】

　　基本上跟 Column Drop 一样，但是有一点点“固定布局“的特点：当到达一定宽度后，主体内容部分不再变宽，成为固定宽度

【Layout Shifter 变换式】

　　变换式，也就是不必遵循原有内容顺序，可以根据最佳展示需要来调整大块顺序

【Off Canvas 抽屉式】

　　抽屉式，屏幕不够宽的时候，隐藏，通过按钮呼出。足够宽的屏幕上，始终显示

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知