移动端布局

一：移动端与pc端的区别

1：系统

pc: windows//mac（区别不大)

移动端：ios/android/windows（有区别）

 

2:浏览器

pc:区别很大(像ie系列的兼容问题)

移动端：区别不大（因为移动端的大多数浏览器的内核都是webkit）

 

 

3：分辨率（尺寸）

 

pc 有区别

移动端 区别很大

 

二、像素概念

css像素（逻辑像素）相对于设备像素-----》一个坑里装着多少个萝卜

 

设备像素（物理像素）

屏幕的物理像素，任何设备物理像素是不变的

一般指的是手机的分辨率

1PT= 1/72英寸

 

 

屏幕尺寸

1：指的是屏幕对角线的长度

2：英寸指的是长度单位不是面积单位

3：1英寸 = 2.54cm

4：屏幕尺寸 = 屏幕斜边的像素/PPI

 

 

像素密度 PPI 每英寸面积上的像素（设备像素的数量）

1：PPI越高，代表在一定的尺寸的设备像素越多,屏幕越清晰

2：是个固定的参数

3：PPI = 屏幕斜边的设备像素 / 屏幕的尺寸

4：同一尺寸下，ppi提高了一倍，那像素会提高四倍

PPI增加n倍，物理像素会增增加n*n倍，同时诶个物理像素的大小会缩小1/4

像素比DPR

 

像素比：(DPR)

DPR = 物理像素/css像素

本质：一个css像素占用几个设备像素

获取：windows.decivePixelRatio

 

 

viewPoit(适口宽度）

 

initial-scale有数值的情况下页面的 计算公式

缩放比 = css像素/viewpoit

<meta name="viewport" content="width=device-width,initial-scale=1,

minimum-scale=1,maximum-scale=1,user-scalable=no">

 

 

 

meta标签

 

 

 

 

适配

在不同的

 

适配的元素

1：字体

2：宽高

3：间距

4：图像（图标 ，图标）

 

适配的方法

  1、百分比适配

适用于任何的方式

 

  2、viewport缩放适配

把所有的机型css像素设置为一至的

 

• vieport需要通过 js动态的设置（不能直接把device的值设置成 数值）
• 通过设置比例（初始比例以及缩放比例）把宽度缩放成一至

公式：缩放比 =物理像素 /css像素 ；

 

缺点：

要考虑设备展示效果；有误差

 

 

  3、DPR缩放适配

把css像缩放成与设备像素一样尺寸 （物理像素和 逻辑像素 为1：1）

 

 

  4、rem适配

 

A:相关概念

em:作为字体单位的时候;代表一个父元素字体的大小，作为其他属性单位的时候代表自身的大小

 

概念：rem:css3新增的相对单位,是相对根元素的字体大小

rem适配的原理 把所有的设备都分成相同的若干份，再计算宽度所占的份数

 

 

• 元素适配元素在设计搞的宽度（ps量出来）的宽度 = 元素实际所占的列数*一列的宽度(1rem)
• 元素实际所的列数（算）====元素设计搞的宽/一列的宽的(1rem)

 

• 屏幕分成多少列=（自己设定）根据元素设计稿的元素算出所占的列数
• 一列的宽度（算）屏幕的实际宽度（css像素）/列数 ===1rem

 

！！！// （chrome注意要大于12px;否则无效）

 

 

B:js中设置根节点字体的大小

方法一

 

真正切图时候的方法（现在以ipone6/7/8为准）在《head中写入脚本》

 

• 算1rem对应的设备实际的css像素----25px
• 量出一个元素在设计搞中的尺寸------187.5px
• ！！！那这个尺寸除dpr再换算成rem 187.5/2/25 = 3.75rem

 

<script>

var html = document.documentElement;

var htmlWidth = html.clientWidth;//css像素

html.style.fontSize = htmlWidth/16 +'px';//以一个设为例

</script>

 

方法二：

(function(doc,win,designWidth){

const html = doc.documentElement;

const refer = () =>{

const clientWidth = html.clientWidth;

//当设备宽度大于设计稿宽度

if(clientWidth > designWidth){

 

html.style.fontSize = '100px';

}else{

//以ipone6为基准

// html.style.fontSize = 16* clientWidth/375 +'px';

html.style.fontSize = 100 * (clientWidth/designWidth) +'px';

}

}

refer();

})(document,window,750)