在PC端,屏幕1200两端留白
在PE端就不行,首先它没有1200px那么大的宽度,其次不能留白,很丑
就需要在手机屏幕上铺满内容
Viewport
在移动设备上进行网页的重构或者开发,首先我们就要搞明白viewport,只有弄明白viewport概念以及与其相关的meta标签的使用,才能更好的让我们的网页适配或者响应不同分辨率的移动设备
一. Viewport的概念
设备屏幕上能用来显示我们网页的那一块区域
获取视口大小:document.documentElement.clientWidth
移动设备上的浏览器会把自己默认的视口大小设为980px或者1024px(由设备决定的)
各 个 浏 览 器 默 认 的 视 口 大 小
使用默认视口给网页带来的后果:出现横向滚动条
因为浏览器的可视区域是比这个默认的视口大小要小一些
二. Css中的1px不等于设备的1px
Css中的1px在不同设备或不同环境下都不一样
在早先的移动设备上,(iPhone3上,css的1px确实等于设备的1px)
但是在iPhone4开始,苹果公司高分子显示屏,会使分辨率提高一倍从而使得屏幕更加的清晰,但是屏幕尺寸却没有变化,这意味着同样大小的屏幕上,像素提高了一倍,在这个时候,css中的1px是等于两个物理像素的,其他移动设备也是这个道理
还有一个点,双指放大功能,如果用户吧页面放大一倍,那么css中的1px也会相应的增加一倍,反之一样
利用meta标签对viewport进行控制
单位 :描述
% : 百分比
In : 英寸
Cm : 厘米
Mm : 毫米
Px :像素(计算机屏幕上的一个点)
Pc :12点活字(1pc等于12点)
Pt 磅:(一磅等于1/72英寸)
Ex :一个ex是一个字体的x-height(通常是字体尺寸的一半)
Em :1em等于当前的字体尺寸
2em :等于当前字体尺寸的2倍
例如:如果某元素以12px显示,那么2em就是24px
在CSS中em是非常有用的单位,因为它可以自动适应用户所使用的字体
Rem是什么
前面说“em”是相对与其父元素来设置字体大小,那么这样就会存在一些问题,进行任何的元素设置,我们都需要知道其父元素的大小,在我们多次使用的时候,就会带来无法预知的错误,但是rem是相对于根元素,这样的话,我们就只需要在根源上确定一个参考值
浏览器的兼容性
Rem是CSS3新引进来的一个度量单位,那么浏览器对其的支持情况是否乐观?
比如说火狐,苹果浏览器,谷歌浏览器都兼容,有一个不兼容那就是IE8(好惨)
以前的手机屏幕大小:320px
有一个好办法,将屏幕分成16份 每一份就是320/16=20px
如果一个div100px,5份
一直延续下来,一直是16份
由于技术的更新导致PE端设备屏幕分辨率变高,所以再分成十六份的话就会出现小数,不利于计算,所以我们只取一位小数四舍五入
Px与rem的转换:
(1) 取得1rem的像素是多少
(2) 用想要转换的px除以1rem的像素