码迷,mamicode.com
首页 > 其他好文 > 详细

最优适配布局

时间:2018-03-21 15:08:24      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:max   用户体验   20px   iphone   return   body   通过   动态改变   nts   

移动端的响应式布局需要通过设置 media queries 配置多个断点,在响应断点切换的瞬间带来断层式的切换变化,用户体验不佳。

而采用 rem 单位的弹性布局,又需要脚本依赖(头部内嵌:监听分辨率变换,根元素字体随之变换的脚本),耦合不佳。

解决方法:利用 视口单位vw + rem 实现适配(已主流)。

了解:1vw 等于视口宽度的 1%,移动端,PC 端都是视口宽度 100vw,高度 100vh。

总结与示例:

1.给根元素大小设置随着视口变化的 vw 单位,这样就可以实现动态改变其大小。

2.限制根元素字体大小的最大最小值,配合 body 加上最大宽度和最小宽度。

 1 // rem 单位换算:定为 75px 只是方便运算,750px-75px、640-64px、1080px-108px,如此类推
 2 $vw_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
 3 @function rem($px) {
 4      @return ($px / $vw_fontsize ) * 1rem;
 5 }
 6 // 根元素大小使用 vw 单位
 7 $vw_design: 750;
 8 html {
 9     font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; 
10     // 同时,通过Media Queries 限制根元素最大最小值
11     @media screen and (max-width: 320px) {
12         font-size: 64px;
13     }
14     @media screen and (min-width: 540px) {
15         font-size: 108px;
16     }
17 }
18 // body 也增加最大最小宽度限制,避免默认100%宽度的 block 元素跟随 body 而过大过小
19 body {
20     max-width: 540px;
21     min-width: 320px;
22 }

 

最优适配布局

标签:max   用户体验   20px   iphone   return   body   通过   动态改变   nts   

原文地址:https://www.cnblogs.com/yuqlblog/p/8616814.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!