一像素 - 什么是像素
在 web 前端开发领域, 像素有以下两层含义:
设备像素: 设备屏幕的物理像素, 对于任何设备来讲物理像素的数量是固定的
CSS 像素: 这是一个抽象的像素概念, 它是为 web 开发者创造的
总结
web 前端领域, 像素分为设备像素和 CSS 像素
一个 CSS 像素的大小是可变的, 比如用后缩放页面的时候, 实际上就是在缩小或放大 CSS 像素, 而设备像素无论大小还是数量都是不变的
二移动端的三个视口
布局视口: 移动端 CSS 布局的依据视口, 即 CSS 布局会根据布局视口来计算
可以通过以下 JavaScript 代码获取布局视口的宽度和高度:
document.documentElement.clientWidth
document.documentElement.clientHeight
第二个视口: 视觉视口
能看到的部分就是视觉视口
第三个视口: 理想视口
理想视口, 这是我们最需要关注的视口, 现在我们来回顾一下我们知道了哪些视口, 有两个, 分别是: 布局视口, 视觉视口
手机浏览器要把布局视口设为理想视口:
<meta name="viewport" content="width=device-width" />
上面那段代码告诉浏览器: 将布局视口的宽度设为理想视口
移动端的三个视口介绍完了, 让我们总结一下:
在 PC 端, 布局视口就是浏览器窗口
在移动端, 视口被分为两个: 布局视口视觉视口
移动端还有一个理想视口, 它是布局视口的理想尺寸, 即理想的布局视口 (注: 理想视口的尺寸因设备和浏览器的不同而不同, 但这对于我们来说无所谓)
可以将布局视口的宽度设为理想视口
三设备像素比 (DPR)
设备像素比 (DPR) = 设备像素个数 / 理想视口 CSS 像素个数 (device-width)
iPhone5 的理想视口是: 320*568 <==> device-width = 320,device-height = 568
iPhone5 的设备像素比: 2
设备像素比 (DPR) = 设备像素个数 / 理想视口 CSS 像素个数 (device-width)
缩放: 缩小放大的是 CSS 像素
meta 视口标签存在的主要目的是为了让布局视口和理想视口的宽度匹配
共有 5 个:
width: 设置布局视口的宽
init-scale: 设置页面的初始缩放程度
minimum-scale: 设置了页面最小缩放程度
maximum-scale: 设置了页面最大缩放程度
user-scalable: 是否允许用户对页面进行缩放操作
媒体查询是响应式设计的基础, 他有以下三点作用:
检测媒体的类型, 比如 screen,tv 等
检测布局视口的特性, 比如视口的宽高分辨率等
特性相关查询, 比如检测浏览器是否支持某某特性 (这一点不讨论, 因为它被目前浏览器支持的功能对于 web 开发来讲很无用)
css 中使用媒体查询的语法:
@media 媒体类型 and (视口特性阀值){
// 满足条件的 css 样式代码
}
适应所有的设备, 我们应该用 javascript 代码动态生成 meta 标签:
let scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
rem 是相对尺寸单位, 相对于 html 标签字体大小的单位:
如果 html 的 font-size = 18px;
那么 1rem = 18px, 需要记住的是, rem 是基于 html 标签的字体大小的
1 将布局视口大小设为设备像素尺寸:
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
2 动态设置 html 字体大小:
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
3 将设计图中的尺寸换算成 rem
元素的 rem 尺寸 = 元素的 psd 稿测量的像素尺寸 / 动态设置的 html 标签的 font-size 值
来源: http://www.bubuko.com/infodetail-2486762.html