屏幕适配需求和屏幕调试方法
-
电脑
- 定宽：页面宽度是固定的
-
移动端
- 自适应全屏：不同设备的屏幕尺寸不同，意味着在不同屏幕下也要保证页面显示完整
- 适配：
- 市面上目前有各种各样的移动端设备，而且设备的尺寸大小都不统一，在这种情况下如何让页面在各种尺寸下都可以显示完好，这就是适配
- 主流适配思路：将页面内容等比缩放，使用em单位来做到这个等比缩放的效果
-
测试
- 模拟器：浏览器打开调试台，切换移动端模式(Ctrl+Shift+M)
- 真机测试
- 安装xampp 启动Apache 的服务器
- 将移动设备和电脑连入同一个局域网在移动设备的浏览器中，输入电脑本机的 ip 地址，访问我们的页面文件。
- 测试设置
- 测试链接是否成功：把页面放入服务器环境 （xampp 安装目录下 htdocs）查看本机 ip 地址：cmd 输入：ipconfig。如果页面成功打开就说明成功了
-
- 将代码放入本机的服务器环境中
- 找到本机在局域网中的 ip 地址
- 将要测试的手机连入局域网
- 确保局域网的路由是允许局域网之间可以相互访问 1）关闭电脑的防火墙 2）检查路由器的设置(开手机热点：手机A 当做路由器开热点，手机B 和 电脑都连入该热点，用手机B 访问电脑)
- 在手机上中输入电脑的 ip 来访问 服务中的资源
- 服务器环境下预览时，本身由于缓存问题，修改经常看不到，可以使用强制刷新(ctrl + f5)
视口设置
-
视口：
- 浏览器的可视窗口
-
视口设置(移动端特有)：
-
当视口没有设置的时候：默认为 width: 980px;
-
<!-- 头部设置视口--> <meta name="viewport" content="[attr]"> -
2-3条的属性(不推荐)：
- 根据当前设备的尺寸进行缩放, 将页面中的内容进行等比缩放。比如 scale 为 .5，页面中的内容都会被缩小一倍，换句话说，视口的分辨率大了一倍
- initial-scale = 设备独立像素 / 视觉视口宽度 视觉视口宽度 = 设备独立像素 / initial-scale
-
| 属性[attr] | 值 | 描述 |
|---|---|---|
| width | 正整数 或 device-width | 以像素为单位，定义布局视口的宽度。device-width是本机的设备的宽度。注意设置正整数时候，部分安卓设备不支持 |
| initial-scale | 允许是小数 | 根据当前设备尺寸进行的缩放和width本身会有冲突，定义页面初始缩放比例 |
| minimum-scale | 0.0 - 10.0 | 根据当前设备尺寸进行的缩放和width本身会有冲突，定义缩放的最小值 |
| maximum-scale | 允许是小数 | 根据当前设备尺寸进行的缩放和width本身会有冲突，定义缩放的最大值（ios10&ios10+无效） |
| user-scalable | yes / no | 设置是否允许缩放，ios10&ios10+无效，默认 no |
- 设备独立像素 和 css 像素
注意事项：
- ios10 及 ios10+ 设置最大缩放值，是否允许缩放无效
- initial 和 width 是有冲突的
- initial 和 最小值 是一致的
- 部分安卓机型，不接受width = 具体数值 这样的操作
em单位
-
概念
- em 想对于当前元素的文字大小进行计算，1em 等于 1 当前元素的字体大小
- 如果用户通过浏览器的UI控件改变了文字的大小，那么我们整个页面也会进行放大（或缩小）
-
举个粒子
html { font-size: 12px; } #box { /* width: 240px */ width: 10em; height: 10em; /* font-size 如果也是 em 赋值则为：1em = 1父级文字大小 */ font-size: 2em; /* font-size: 24px */ background: red; } #div { /* width: 60px */ width: 5em; height: 5em; /* font-size:12px; */ font-size: .5em; background: yellow; } -
em和px的计算
-
1、浏览器的默认字体大小是16px。
-
2、如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，我们都可以按下面的公式来计算
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
-
3、如果元素设置了字体大小，那么字体大小的转换依旧按第二条公式计算，也就是下面的：
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
-
4、如果元素设置了字体大小，此元素的其他属性，如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算：
1 ÷ 元素自身的font-size × 需要转换的像素值 = em值
-
rem 单位
rem (root em)，换而言之 1rem = html font-size 的大小。所以如改变html 的font-size 大小就可以对内容进行等比例的缩放，也就是我们所说的适配。
接下来就用rem做一个适配的小例子:
-
CSS思路：
- 选定一个机型iphone X width 375px ，为了方便计算设置一个能整除的fontsize：25px ，就是说一个fontsize 是屏幕的1/15
- 三个盒子原本的宽度是 box1:130px box2:110px box3:135px, 高为100px，接下来我们要计算这3个box的宽高 px 等于多个个rem，就是上面像素除以15
- 选择其他机型例如iPhone 6 width 414px ，可以计算他的1/15是多少个像素 =27.6 px，然后设置html 下的font-size = 27.6px;
<style>
* {
margin: 0;
padding: 0;
}
html {
/* iphone X width 375px 为了方便计算设置一个能整除的fontsize 15px ,
就是说一个fontsize 是屏幕的1/15
*/
/*font-size: 25px;*/
/* 修改font-size 27.6 px 适配iPhone 6*/
font-size: 27.6px
}
/* 三个盒子原本的宽度是 box1:130px box2:110px box3:135px, 高为100px
接下来我们要计算这3个box的宽高 px 等于多个个rem
*/
/*
测试：iphone X 完全没有问题
iPhone 6、7、8 width 414px 然后我们可以计算他的1/15是多少个像素 =27.6 px
*/
.box1 {
float: left;
width: 5.2rem;
height: 4rem;
background: brown;
}
.box2 {
float: left;
width: 4.4rem;
height: 4rem;
background: greenyellow;
}
.box3 {
float: left;
width: 5.4rem;
height: 4rem;
background: rosybrown;
}
-
搭配JS完成所有机型适配
- 定义设置字体大小的函数，根据屏幕的像素设置
- 当window 大小改变的时候，就是resize时候调到用这个函数
<!--利用js适配所有分辨率--> // 获取屏幕宽度 function setSize() { let size = innerWidth / 15; document.querySelector('html').style.fontSize = size + 'px'; } setSize(); window.onresize = setSize;
vw + rem 适配
VW 和 VH是两个特殊的单位，100VW 等于当前设备可视区的宽度，100VH 等于当前设备可视区的高度。那么利用这个特殊的单位，可以html font-size 中使用，让他和设备宽度进行适配
-
vw 设置用于适配机型：
html {
/* iphone X width 375px,
就是说一个fontsize 是屏幕的1/15
根据上面数据和例子，计算 font-size = 100vm / 15 = 6.666...
*/
font-size: 6.66vw;
}
