移动端的三种适配方案——下

接上回继续看移动端的三种适配方案

移动端的三种适配方式——上_那只猫喝咖啡的博客-CSDN博客

1.viewport适配

        拿到设计图（若设计图375），将布局视口=设计图宽度（若为375）

        <meta name='viewport' content="width=375">

 

 由上图可知，即使是在1280的设备独立像素值的设备下，也依然属于占满状态

缺点：

        1.1 边框1px在不同设备的粗细是不相同的，由于拉伸的原因

        1.2 浏览器有些是不支持指定值的

        1.3 图片会失真，由于盒子被拉伸

2.rem适配（完美）——有两种适配方案 

        2.1（目前淘宝和百度在用）方案一

                看下图：在iphone6下的元素是325，如果iphone 6p 的显示效果和6相同应该是多宽呢？

                325/375=？/414

                可知  ？=358.8px

                首先我们的目的是通过改变根字体的大小来实现的

        在iphone6下如果令根字体为100px，则325px=3.25rem

        在iphone6p下，100/325=x/358.8   可知6p下的根字体是110.4，则在6p下358.8px=3.25rem

        发现只要改变根字体的大小，就能同比适配不同设备，而且是统一的单位rem

        了解到它的主要目的是改变根字体大小，依据公式就要获取到设备独立像素值，

  <script>
    // 获取布局视口宽度，由于开启了理想视口，布局视口=横向的设备独立像素值
    const dpWidth=document.documentElement.clientWidth
    // 计算根字体大小
    const rootFontSize=(dpWidth*100)/375
    // 设置根字体大小
    document.documentElement.style.fontSize=rootFontSize+'px'
    </script>

所以在编写样式时，都要统一为rem的单位，且设计值/100，例如上方的325px=3.25rem,这样在不同设备上都是3.25rem但不同设备rem的代表的像素值不同，从而实现适配。

        2.2（搜狐、唯品会在用）方案二：

        也是改变根字体大小，根字体=（横向设备独立像素值）/10

        编写样式时：直接以rem为单位，px转换为rem的值为

 

        由于编写样式时，每个元素的rem都要除37.5确实不方便，所以使用less计算

先写js代码，由于根字体是根据视口宽度变化的，和方法一一样获取布局视口

  <script>
    const dpWidth=document.documentElement.clientWidth
    const rootFontSize=dpWidth/10
    document.documentElement.style.fontSize=rootFontSize+'px'
    </script>

下载easy-less插件，当保存.less文件没有自动生成.css文件，记得要外联的是生成的那个csseasy-less突然无法自动转为css，刚解决完就来写了哈_那只猫喝咖啡的博客-CSDN博客

如果没事就继续往下，下方为less代码

@font:(375/10rem);
*{
    margin: 0;padding: 0;
}
.demo{
    width: (325/@font);
    height: (23/@font);
    background-color: black;
}

此时方法二结束，来看效果图

3.vw适配

 它的特点很明显，没有js代码，但是兼容性却不好，所以一般很少用

先简单了解一下vw/vh的概念

vw:就是把布局视口的分成了100份，1vw=1%的布局视口=1%视觉视口

vh就是视口高度的1%

用less计算

@basic:375/100vw;

*{

margin: 0;padding: 0;

}

.demo{

width: (325/@basic);

height: (23/@basic);

background-color: black;

}

 在chrome浏览器中,运行正常，但其他浏览器的兼容性不好

 "vw" | Can I use... Support tables for HTML5, CSS3, etc

        测试兼容性的网站↑↑↑↑↑↑↑↑↑↑↑↑