一 设备独立像素
每个设备都有属于自己的独立像素,通过浏览器的模拟器可以看到,每个设备的独立像素。
每个设备设备独立像素,跟之前所有的物理像素之间关系如下:
- 设备像素比
所谓像素比,即是:物理像素和设备独立像素的比值
这个比值可以利用 JS 进行获取:window.devicePixeRatio
。
二 视口概念
2.1 布局视口
布局视口是网页布局的基准窗口,在这里只考虑布局,也就是不会有非布局的内容,比如:滚动条,菜单栏。
在移动端,布局视口有一个默认值 980px
,这保证了 PC 网站可以在手机上显示。
在 JS 中可以通过 document.documentElement.clientWidth
来获取布局视口大小。
2.2 视觉视口
视觉视口是用户视觉上看到的真实区域,包括滚动条。
在 JS 中可以通过window.innerWidth
2.3 理想视口
理想视口是我们常说的设备独立像素,不过当布局视口和适口一致时,结果就是一样的。
在 JS 中可以利用 window.screen.width
可以获取到。
三 适配
3.1 视口设置
想要更改布局视口,利用 meta
的标签的 viewport
来进行设置,除此之外,还可以进行页面的缩放等操作。
3.2 viewport 相关配置
属性 | 值 | 描述 |
---|---|---|
width | 正整数 或 device-width | 以像素为单位,定义布局视口的宽度 |
height | 正整数 或 device-height | 以像素为单位,定义布局视口的高度 |
initial-scale | 允许是小数 | 定义页面初始缩放比例 |
minimum-scale | 0.0 - 10.0 | 定义缩放的最小值 |
maximum-scale | 允许是小数 | 定义缩放的最大值(ios10 & ios10+无效) |
user-scalable | yes / no | 设置是否允许缩放,同上无效 |
- initial-scale = 设备独立像素 / 视觉视口宽度
- 视觉视口宽度 = 设备独立像素 / initial-scale
3.3 注意事项
- iso10 及ios10+ 设置最大缩放值无效
- inital 和 width 是有冲突的
- initial 和 最小值 是一致的
- 部分安卓机型 不接受 width = 具体数值 这样的操作
注意: 正常情况下,我们会把初始,最小,最大都设置为 1,不允许用户缩放页面。但是因为 maxium 无效,所以会通过 JS 来禁止缩放。
视口设置:
html
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
3.4 rem适配
<style>
// 设置当前这个html根元素的字体为20px
html {
font-size: 20px;
}
div {
font-size: 15px;
width: 5rem;
height: 5rem;
background: red;
}
</style>
width = 20* 5 = 100px
然后利用 JS 动态设定 font-size
:
<script>
// 获取当前页面的html根元素
var html = document.documentElement
// 获取当前页面的html根元素的宽
var widths = html.clientWidth
// 分为10等份
var num = 10;
html.style.fontSize = widths / num + 'px'
比如:
当前设计稿给的宽是640 就是 640 / 10 = 64rem 所有量设计稿的div的宽高,就可以直接 设计稿宽 / 64rem
css
@rem: 64rem;
.header {
height: 88 / @rem;
/* 88头部的高度是设计稿给的 * 64整体的宽度 */
position: fixed;
background: red;
}
</script>
总结:
- 移动端适配单位:rem ,适配时候需要利用js动态设定
font-size
。 viewport
一定要设置。- 清楚物理像素 设备独立像素,像素比三个概念。
四 真机调试
下载地址: https://sourceforge.net/projects/xampp/files
安装:打开 找到 Apache
点击 start
开启服务
如果启动失败端口被占用的情况下:修改端口文件 httpd-ssl-conf文件
注: 个人觉得这种真机调试太麻烦了,可以直接用 live-servers 去 https://www.npmjs.com/ 找到相对应的npm live-server 安装包进行全局安装。
1、输入: live-server 启动
2、把前面 live-server 服务自动给匹配的地址改成你本机的 ip 地址即可
五 横竖屏适配
@media screen and (orientation:portrait){
#box{
background: red;
}
}
@media screen and (orientation:landscape){
#box{
background: green;
}
}
- screen 屏幕
- orientaion 方向
- portrait 竖向
- landscape 横向
六 适配 iphone x
利用 iphoneX
专属样式 viewport-fit
属性,会对网页设置安全区:
<meta name="viewport" content="viewport-fit=cover>
加给自己想要的间距, 比如说:
body{
padding-bottom:constant(safe-area-inset-bottom);
padding-bottom:env(safe-area-inset-bottom);
}
- constant 小于 ios11.2 版本生效
- env 大于 ios11. 2版本生效
- padding-bottom: constant(safe-area-inset-bottom) //里面值不需要自己去填写,
- padidng-bottom: env(safe-area-inset-bottom)
- .safe-area-inset-left 设置左侧安全区
- .safe-area-inset-right 设置右侧安全区
- .safe-area-inset-top 设置顶部安全区
- .safe-area-inset-bottom 设置底部安全区
七 1px 适配方案 可以用来缩放达到目的
这里用的是伪类的发放,获取像素比,然后根据媒询来进行相对应的缩放大小如
.border_1px:before{
content: '';
position: absolute;
top: 0;
height: 1px;
width: 100%;
background-color: #000;
transform-origin: 0% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
.border_1px:before{
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio:3){
.border_1px:before{
transform: scaleY(0.33);
}
}
- -webkit-min-device-pixel-ratio 获取像素比
- transform: scaleY(0.5) 垂直方向缩放,后面的数字是倍数
注: 我是不建议这种,可以直接用 img 图片而简单快捷了很多
八 一些骚操作
-
生成 app 图标:
<meta name="apple-mobile-web-title" content="我的app">
-
启用 webApp 全屏模式:
<meta name="apple-mobile-web-app-capable" content="yes">
删除默认的苹果工具栏和菜单栏默认为 no<meta name="apple-touch-fullscreen" content="yes">
全屏展示(app的时候会用到)
- 本文档引自与掘友–梁sir 同时也是自己的学习经历
- 梁sirGit地址:[https://github.com/LiangJunrong/document-library]