前端移动端适配

Recursion
2,138 阅读4分钟

原帖：blog.csdn.net/weixin_3763…

rem,em,px的区别

  • rem是一个相对单位，相对于HTML根元素，只需要修改根元素就可以成比例调整所有字体大小。
  • em相对于当前对象内文本的字体尺寸，如果没有认为设置，相对于浏览器默认字体尺寸。em会继承父元素的字体大小
  • px是相对与显示器分辨率而言。

这里讲述移动端适配的5种方法

1.viewport适配

原理：通过设置initial-scale，将所有设备布局的窗口调整成为设计图的宽度

// 获取meta节点
var metaNode = document.querySelector('meta[name=viewport]');

// 定义设计稿宽度
var designWidth = 375;

// 计算当前屏幕的宽度与设计稿比例
var scale = document.documentElement.clientWidth/designWidth;

// 通过设置meta元素中content的initial-scale值达到移动端适配
meta.content = "initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";

2.借助media实现rem适配

rem:CSS的长度单位，根元素字体大小的倍数，只有根元素字体大小有关；html中的根元素即html元素。

大部分浏览器的默认字体大小都是16px，所以1rem=16px;

rem适配原理

  • 长度单位都用 rem 设置
  • 当屏幕尺寸改变时，只需要修改html元素的font-size就可以实现等比适配
  • 只需要考虑与设计稿相同的屏幕尺寸，其他尺寸屏幕自动适配
// 对屏幕大小划分了html不同的font-size
@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}
@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}

3.JS配合修改rem适配

var designWidth = 375; // 设计稿宽度
var remPx = 100;   // 在屏幕宽度375px的时候。设置根元素字体大小100px
var scale = window.innerWidth/designWidth;  //计算当前屏幕的宽度与设计稿比例
// 根据屏幕宽度 动态计算根元素的 字体大小
document.documentElement.style.fontSize = scale*remPx + 'px';

用当前屏幕的宽度与设计稿相除的比值scale乘以100，是因为rem都是基于font-size来设置的，100便于计算，值可以为任意数

  • 当某个元素设计稿设计宽度为640px，在CSS中设置width: 6.4rem
  • 当某个元素设计稿字体大小为16px，在CSS中设置font-size: 0.16rem

4.JS动态修改配合CSS预处理器（less）

// 计算屏幕宽度
var screen - document.documentElement.clientWidth;
// 计算字体大小，取屏幕宽度的1/16
var size = screen/16;

// 设置根元素字体大小
document.documentElement.style.fontSize = size + 'px';

JS获取当前屏幕的宽度，将屏幕宽度的1/16设置给html的font-size。

// 此时设计稿的宽度为375，定义一个less变量等于1/16的设计稿宽度
@rem: 375/16rem;

如果此时设计稿中的某元素设置宽高为200px

.box {
    width: 200px;
    height: 200px;
}

利用rem可以替换为：

.box {
    width: 200/@rem;
    height: 200/@rem;
}

5.JS动态修改配合rem适配

这个方法与第四种类似，但是不需要在less中定义变量，只需要进行js获取配合查找替换px即可

// 计算屏幕宽度
var screen = document.documentElement.clientWidth
// 设置根元素字体大小
document.documentElement.style.fontSize = screen + 'px';

.box {
    width: 200px;
    height: 200px;
}

.box {
    width: 200/375rem;
    height: 200/375rem;
}

这种方法通过JS获取屏幕宽度，直接将html的font-size设置为屏幕宽度，再到less中进行换算。如果此时JS获取的屏幕宽度为750px，html的font-size设置为750px后，此时计算box的width为400px。

200/375rem = 200/375*750 px = 400 px
avatar
文章
阅读
粉丝