viewport适配基础知识

移动端适配有两种简单的方案

苹果6的基本信息：

屏幕尺寸：4.7英寸

分辨率：1334*750

视口大小：375*667

布局视口：980*1429

1、 rem适配

em是指该元素的fontsize大小，如果该元素没有设置fontsizi，em就代表父元素fontsize大小，一直往上找，直到<html>根标签的fontsize大小。

rem是指<html>根标签的fontsize大小，火狐浏览器的默认字体大小是16px，则火狐浏览器中1rem就代表16px。

重置布局视口代码

扫描二维码关注公众号，回复： 6769859 查看本文章

<meta name=”viewport” content=”width=device-width,initial-scale=1.0”>

//让布局视口的大小等于理想视口的大小

思考：布局视口的大小为375px，如果把html字号设置为375px，那么布局视口的大小就是1rem，视口的一半就是0.5rem。

html.style.fontSizi=document.documentElement.clentWidth+”px”;

视口的一半写0.5rem不方便，扩大到8rem：

html.style.fontSizi=document.documentElement.clentWidth/16+”px”;

写一段js代码简单的封装：

;(function(){
　　var styleNode=document.creatElement(“style”);
　　var w=document.documentElement.clientWidth/16;
　　styleNode.innerHTML=”html{font-size:”+w+”px!important}”;
　　document.head.appendChild(styleNode);
})()

2、 viewport适配

重置布局视口中的initial-scale=1.0的意思是设置初始缩放比例，作用和width=device-width是一样的，默认的initial-scale=理想视口大小/布局视口大小=375/980。

思考：既然理想视口大小不可以改变，那么改变initial-scale的比例值肯定是改变的是布局视口的大小，假入给了一张设计图纸为750px，直接把比例值计算出来就可以把布局视口重置为设计图纸的大小。

理想视口大小/设计图纸大小=375/750=0.5，

将initial-scale设置为0.5，

那么理想视口大小/布局视口大小=0.5，

布局视口大小就等于设计图纸的大小，比例是1:1的关系。

(function(){
　　var target=750;
　　//设计图纸的大小，动态的
　　var scale=window.screen.width/targetW;
　　//计算出缩放比例
　　var meta=document.creatElement(“meta”);
　　meta.name=”viewport”;
　　meta.content=”inttial-scale=”+scale+”,user-scalable=no”;
　　document.head.appendChild(meta);
})()

viewport适配基础知识

猜你喜欢