移动端适配

屏幕了解
视口
- 理想视口—主要使用
  - 特点：
em 相对长度单位
字体大小
了解rem单位
- rem-媒体查询@media(条件媒体特性)

屏幕了解

开发中常用谷歌浏览器调试和模拟手机模拟器
PC端网页和移动端网页的区别：
🎈PC端屏幕大，网页有固定版心
🎑手机屏幕小，网页的宽度多数为100%；

例：设备参数
移动端适配 - 图1

手机尺寸：单位英寸，指手机的斜对角线（电脑，平板等也是斜对角英英寸）
PPI （像素密度）单位英寸内的物理像素点个数，值越大，屏幕越清晰
物理像素点：指的是屏幕中显示图像最小的单位，
设备分辨率：由出厂的物理硬件决定；
一个个像素点组成图片可视，手机屏幕中一共有多少物理像素点
逻辑分辨率：屏幕的宽度 * 屏幕的高度（px) ；软件绝对
设备像素比==设备分辨率和逻辑分辨率的比例，相当于屏幕的清晰度的倍数
同样大小的屏幕下，谁的设备分辨率越高，谁越清晰
🌈肉眼可视清晰度有限，不同清晰度手机需要匹配不同清晰度的图片，如1倍图，2倍图，3倍图
```
图片适配： img标签使用 srcset
<img srcset="./1.png 1x/1.png 2/1.png 3x">
背景图片中使用 -webkit-img-set
background-image: -webkit-img-set(url('1.png') 1x,url('1.png') 2x,url('1.png') 3x):
```
🎃在制作网页参考逻辑分辨率，有缩放比（PC分辨率：window10 右键显示设置）

以移动端项目开发为例子：
一般以iPhone6/7/8 逻辑分辨率：375*667 比例关系2：1

在移动端项目开发的时候，一般收到的是二倍图或者三倍图
二倍图设计稿尺寸：是物理分辨率——750px

写项目时是逻辑分辨率：375px;
用像素大厨 PxCook 测量二倍图像素尺寸，选择开发中的———设计图 2X———代表这个二倍图

视口
概念：可以看到的网页区域，指手机浏览器内显示页面的区域；
一般可以认为视口的宽度等于网页的根标签html的宽度；
使用meta标签设置视口宽度
视口可以按照移动端历史的发展来分类，主要分为两种
布局视口：早期移动布局产物—-宽度980px，pc端的网站，版心一般都是小于等于980px
所以特点： html标签的大小是 980px
页面上的元素都是被缩放的

理想视口—主要使用
与布局视口的区别：理想视口是目前移动端上都在使用的；

特点：
```
   手机屏幕多大，根标签html就是多大<br />            页面元素不会被缩放<br />💥添加了meta:viewport 就是理想视口，没有添加就是布局视口
```
```html 普通写法：

严格写法：

理想视口的参数详解： meta标签用来描述或设置一个HTML网页文档的属性 content 要设置或者描述的内容 width 设置视口的宽度 device-width等于屏幕的宽度 initial-scale 页面打开的时候视口放大的倍数 user-scalable 是否允许用户缩放页面 maximum-scale 如果允许放大的话最大放大多少倍 minimum-scale 如果允许放大的话最小放大多少倍

<a name="2fcf2f99"></a>
# 屏幕适配  vw / vh---重点
<a name="7fc9893f"></a>
### 相对长度单位
        vw：viewport width           1vw = 1/100视口宽度    **100vw等于 屏幕的宽度**<br />        vh：viewport height           1vh = 1/100视口高度    **100vh等于 屏幕的高度**<br />效果：手机屏幕越大，看见的元素越大<br />优点：简单方便、主流<br />运算：calc(100vw - 10px);     运算符 两侧   空格    隔开；
<a name="15679048"></a>
### 公式  元素大小 = calc(100vw * 设计稿中元素大小  / 设计稿大小);

![](http://md.zbztb.cn/uploads/19364131285/1652189290076.png#crop=0&crop=0&crop=1&crop=1&id=hzOXv&originHeight=225&originWidth=591&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)
<a name="05b9f179"></a>
### 设置 width : calc (100vw * 100 / 375);

<!DOCTYPE html>

屏幕了解

视口

理想视口—主要使用

特点：