移动端适配(视口单位)

作者:龙 时间:2018-07-12 浏览:53

由于viewport单位得到众多浏览器的兼容,lib-flexible这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题。建议大家开始使用viewport来替代此方案。vw的兼容方案可以参阅《如何在Vue项目中使用vw实现移动端适配》一文。


之前,可以动态的给根元素字体大小html添加font-size,后来推出了flexible的方案,从官方github上看,现在也不推荐使用flexible方案,下面来看viewport方案,

  1. 1vw等于视口宽度的 1%
  2. 1vh 等于视口高度的 1%
  3. vw 和 vh 中的较小值
  4. vmax — vw 和 vh 中的较大值

视口,即浏览器屏幕大小,1vw 等于浏览器宽度的 1%,100vw 即整个浏览器的宽度。


下面来看看viewprot方案的兼容性



 

利用视口单位实现适配:

一、仅仅使用vw作为css单位的唯一单位

a.对于设计稿的尺寸转换为vw单位,我们使用Sass函数编译

  //iPhone 6尺寸作为设计稿基准 
  $vw_base: 375; 
  @function vw($px) {
    @return ($px / 375) * 100vw; 
  }	

b.对于页面的字体,间距,大小等尺寸都使用vw作为单位

.vp {
        width: 40vw;
        height: 20vw;
        background: pink;
        color: #000;
        margin-left: auto;
        margin-right: auto;
        font-size: 0.34vw;
        padding-top: 2vm;
  }

c.移动端1物理像素线(也就是普通屏幕下 1px ,高清屏幕下 0.5px 的情况)采用 transform 属性 scale 实现。

     .border_1px{
            position: relative;
            &::after {
                content: '';
                position: absolute;
                z-index: 1;
                pointer-events: none;
                background-color: #ddd;
                height:1px;
                left: 0;
                right: 0;
                top: 0;
                @media only screen and (-webkit-min-device-pixel-ratio: 2) {
                    -webkit-transform: scaleY(0.5);
                    -webkit-transform-origin: 50% 0%;
                }
            }
        }
二、使用vw,搭配rem,此方法更值得推荐
// rem 单位换算:定为 75px 只是方便运算,750px-75px、640-64px、1080px-108px,如此类推
$vw_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vw_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vw_design: 750;
html {
    font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; 
    // 同时,通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body 也增加最大最小宽度限制,避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

关于我们

About us
全国服务热线

027-89992189

Copyright 2018-2020 All Rights Reserved 武汉互赢网络科技有限公司 版权所有 武汉网站制作公司

获取品牌营销方案

快速填写

互联网低成本创名牌从此开始!