视口及媒体查询
一、像素及视口
1.1 像素
像素
- 屏幕是由一个个发光的小点构成，即像素构成
- 分辨率：1920 x 1080 指的是屏幕中小点的数量
- 前端中像素有：css像素 和 物理像素
- 物理像素：上述所说的小点点就属于物理像素
- css像素：编写网页时，用的是css像素
- 浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现
- 一个css像素最终由几点物理像素显示，由浏览器决定：
默认情况下在pc端，一个css像素 = 一个物理像素
1.2 视口（viewport）
- 视口：屏幕中用来显示网页的区域
- 通过查看视口的大小，可以观察css像素和物理像素的比例
- 默认情况下：
视口宽度：1920px（css像素）
1920px（物理像素）
- 此时，css像素和物理像素比值为 1:1
- 放大两倍：
视口宽度：960px(css像素)
1920px(物理像素)
- 此时，css像素和物理像素比值为 1:2
二、移动端
不同屏幕下，单位像素的大小是不同的；像素越小，屏幕会越清晰
24寸 1920 x 1080
i6 4.7寸 750 x 1334
智能手机的像素点 远远小于 计算机的像素点
问题：一个宽度为900px的网页在iPhone6中要如何显示？
默认情况下，移动端的网页都会将视口设置为980px（css像素），以确保pc端页面可以在移动端正常访问；
若超出了980px，移动端的浏览器会自动对网页缩放以完整显示网页。
基本大部分的pc端网站都可以在移动端中正常浏览，但是往往不会有一个好的体验
因此，大部分网站都会专门为移动端设计网页
三、完美视口
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>完美视口</title> <style> *{ margin: 0; padding: 0; } .box1{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <!-- 移动端默认的视口大小是980px（css像素） - 默认情况下，移动端的像素比是 980/移动端宽度 - 直接在网页中编写移动端代码，在980px的视口下，像素比非常不好，导致网页内容 非常小 - 编写移动端页面时，必须要确保有一个比较合理的像素比： 1css像素 = 2/3个物理像素 - 可以通过meta标签来设置视口大小 <meta name="viewport" content="width=device-width, initial-scale=1.0"> --> <div class="box1"></div> </body> </html>
四、vw（视口宽度：viewport width）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vw</title> <style> *{ margin: 0; padding: 0; } .box1{ width: 100vw; height: 100px; background-color: #bfa; } </style> </head> <body> <!-- 由于不同设备视口和像素比不同，所以在移动端开发时，就不能使用px vw：视口宽度viewport width - 100vw = 一个视口的宽度 - 1vw = 1%视口宽度 vw这个单位永远相当于视口宽度进行计算 设计图的宽度 750px 或 1125px 创建一个 48px x 35px 大小的元素 - 100vw = 750px（设计图的像素） 0.1333333333333vw（100/750）= 1px - 6.4vw = 48px（设计图像素） - 4.667vw = 35px --> <div class="box1"></div> </body> </html>
五、vw适配
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vw适配</title> <style> *{ margin: 0; padding: 0; } html{ /* 网页中字体大小最小为12px，不能设置一个比12px小 0.1333333vm = 1px 5.3333vw = 40px */ font-size: 5.3333vw; } .box1{ /* rem - 1 rem = 1 html的字体大小 - 1 rem = 40px(设计图) */ width: 4.8rem; height: 3.5rem; background-color: #bfa; } </style> </head> <body> <div class="box1"></div> </body> </html>
六、媒体查询（响应式布局）
<style> @media only screen and (min-width: 500px) and (max-width: 700px){ body{ background-color: #bfa; } } </style>
6.1 媒体类型
① all：用于所有设备
② print：用于打印机和打印预览
③ screen：用于电脑屏幕，平板电脑，智能手机等
④ speech：应用于屏幕阅读器等发声设备
6.2 @media语法
① and：并集
② only：仅仅（解决浏览器兼容性）
③ not：除了
④ ","：交集
@media mediatype and|not|only (media feature) {
CSS-Code;
}
