移动端网页设计基础
一.在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是等于两个物理像素的