- 屏幕是由一个一个发光的小点构成,这一个个小点就是像素
- 分辨率:1920*1080 说的是屏幕中小点的数量
- 在前段开发中像素要分成两种情况进行讨论,css像素和物理像素
- 物理像素:上述所说的小点就属于物理像素
css像素:编写网页时,我们所用像素都是css像素
- 一个css像素最终由几个物理像素显示,再由浏览器决定
- 默认情况下,在pc中 一个css像素==一个物理像素
浏览器中用来显示网页的区域
可以通过查看视口的大小来观察CSS像素和物理像素的比值默认情况下:
- 视口宽度:1920(CSS像素)1920(物理像素)
- 此时CSS像素和物理像素的比值是1:1
放大两倍的情况
- 视口宽度:960px(CSS像素) 1920px(物理像素)
- 此时CSS像素和物理像素的比是1:2
我么可以通过改变视口的大小,来改变CSS像素和物理像素的比值
在不同的屏幕,单位像素的大小是不同的,像素越小屏幕会越清晰
智能手机的像素点远远小于计算机的像素点
默认情况下,移动端的网页都会将视口设置为980像素(css像素)。以确保pc端网页可以在移动端正常访问,移动端的浏览器会自动对网页缩放以完整显示网页
- 所以基本大部分的pc端网站都可以在移动端中正常浏览,但是往往都不会有一个好的体验,大部分网站往往都会专门为移动端设计网页
3.1完美视口
- 移动端默认的视口大小是980px(css像素),默认情况下,移动端的像素比就是 980/移动端宽度(980/750)
- 如果我们直接在网页中编写移动代码,这样在980的视口下,像素比是非常不友好,导致网页中的内容非常小
- 编写移动页面时,必须要确保要有一个比较合理的像素比
- 1css像素对应2个物理像素
- (或者)1css像素对应3个物理像素
通过视口来调整像素比
- 通过meta标签来设置视口大小
<meta name="renderer" content="width=300px">
一般我们只需要将像素比设置为该值即可得到一个最佳效果,将像素比设置为最佳像素比的视口大小我们称其为完美视口
device-width表示设备的宽度(完美视口)
<meta name="renderer" content="width=device-width,initial-scale=1.0">
3.2手机端元素布局
由于不同设备视口和像素比不同,所以同样的375个像素在不同的设备下意义是不一样的,比如在iphone6中375为全屏,而到了plus中375就会缺一块
所以在移动端开发时,就不能再使用px来进行布局了
使用vw(视口宽度)来布局
- viewport width:永远相对于视口宽度进行计算
- 100vw就等于一个视口的宽度(横向撑满)
<meta name="renderer" content="webkit">//指定双核浏览器(如qq,360浏览器)默认以何种方式渲染页面,这里指定默认用webkit渲染
使用rem来布局
- 1rem代表html的字体大小
- 2rem代表一倍html字体大小
100vw=750px
所以,1px=0.13333333333333vw
html{
font-size:0.1333333333333333vw;
}
.box1{
48rem;
height:35rem;
}
注意:网页中字体大小最小是12px,不能设置一个比12像素还小的字体,如果我们设置了一个小于12px的字体,则字体自动设置为12
- 虽然现在浏览器有更新能够随意设置字体,但是为了兼容还是需要改进代码
html{
font-size:13.33333333333333vw;
}
.box1{
0.48rem;
height:0.35rem;
}
页面的设计图像素设置
- 如果设备的完美视口为375,那么设计图的宽度:750px 1125px
- 原因
- 因为现在完美视口为375,物理像素和完美视口为2:1
- 当设计图为375时,就会将原来375的页面放大两倍
- 所以要将设计图设计为750,甚至为1125(三倍)