01、响应式布局概念

像素

分辨率

手机1792 x 828 表示：每一排有828个物理像素点，每一列有1792个物理像素点

物理像素（dp）

//物理像素（physical pixel）也叫设备像素（dp：device pixel）

CSS像素（dpi）

//也叫逻辑像素（logical pixel）、设备独立像素（dip：device independent pixel），叫dip也没错

css中实际开发用到的像素，在标清屏中1dpi用1dp显示，在高清屏中1dpi用多个dp来显示。（1dpi用多个dp来显示的话，内容更加清晰，现在所有的手机或电脑几乎用到的都是高清屏）

设备像素比（dpr）

//device pixel ratio。dpr = 物理像素 / CSS像素（指同一个方向上的像素，横向或纵向都可以）

标清屏dpr为1，高清屏dpr > 1

console.log(window.devicePixelRatio); //直接在控制台打印出像素比

 

缩放

手机/电脑缩放的时候，本来1css像素用2个物理像素显示，放大时1css像素用4个/8个/更多的物理像素来显示，缩小时1css像素用1/4个更小的物理像素来显示

每英寸的物理像素点（ppi）

//ppi：pixels per inch ，也叫dpi：dots per inch

 

 

视口（viewport）

移动端开发中视口不需要太大，需要 视口宽度 = 设备屏幕宽度 或者 定义初始化缩放比为1

<meta name="viewport" content="width=device-width">

 

<meta name="viewport" content="initial-scale=1">

 

禁止用户进行缩放，或者，最大缩放为1、最小缩放为1

<meta name="viewport" content="user-scalable=no">

 

<meta name="viewport" content="maximum-scale=1,minimum-scale=1">

 

兼容性写法

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">

 

 

获取屏幕宽度

console.log(window.innerWidth);
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.getBoundingClientRec().width);

 

兼容性写法

var viewWidth = window.innerWidth || document.documentElement.clientWidth || document.documentElement.getBoundingClientRec().width;

 

兼容性不好的方法

console.log(screen.width);//本来获取的宽度是css像素，但有时获取到的是设备的物理像素宽度

 

 

box-sizing属性

content-box（默认值）

css设置的宽度是容器内容的宽度（不包含边框或内边距），当改变border或padding的时候会搞乱布局。

border-box

//推荐清除默认样式时就用

css设置的宽度为容器整体的宽度（包括边框或内边距等内容），怎么操作都不会搞乱布局。

 

图标字体

阿里巴巴矢量图标库：https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a

1、搜索想要的图标加入购物车

2、完成后点击购物车添加至项目

3、使用方法有很多，这里使用Font class 下载到本地的方式。（在css3中学过Unicode方式）

4、解压，选择用到的东西复制到自己的font目录

 

5、在自己的html中引入iconfont.css

<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>

 

6、在阿里巴巴图标库  ->  我的项目中，选择要的图标字体，复制class名

 

7、在i标签的class中粘贴使用，第一个class名iconfont不能更改。

<i class="iconfont 粘贴到这里"></i>

 

8、在css中可以对iconfont类进行更改，如字体大小、字体颜色等。

 

移动端常用单位

px：......

%：......

em：以容器自身的字体大小为对比。（若本身没设置字体大小，继承父元素的字体大小）

rem：以根目录的字体大小为对比。（更改根目录字体大小，其他的也会变化）

vw/vh：1表示屏幕宽度/高度的百分之一