移动端布局方式与设计图
现有的布局方式:
-
固定布局,每一个元素都是固定的尺寸,内容区域居中在浏览器中间
内容区域的尺寸:980,1000,1100,1200
-
响应式布局,利用媒体查询来实现不同尺寸的浏览器显示结构不一样 @media 根据浏览器分辨率大小进行适配
一般会有三张设计图,PC,平板,手机
-
自适应布局,属于响应式里的一种,利用rem、百分比、vwvh等布局单位来实现
设计图一般只有一张,640、750居多
移动端布局
移动的屏幕和PC的屏幕有一个很大的区别,移动端是视网膜高清屏(Retina)
retina屏幕有一个属性叫DPR(设备像素缩放比) = 物理像素/逻辑像素
例如,iphone 6手机商宣传手机的尺寸是:750宽,这个值就是物理像素,而从开发者眼里我们所指的其实是375px(逻辑像素)
在dpr为2的手机中,我们的一个逻辑像素会从横纵两个方向分别以2个像素点来渲染
如果不管dpr的话,其实我们布局依然可以,因为我们设置一个像素宽高的东西的话,在手机上看见的基本也就是这么大,至于手机设备用多少个物理像素去渲染,大小还是不会变化的
设计师出图都是2倍的,是因为,在页面中除了字体(矢量图)大部分都是位图,也就是如果一个像素宽高的盒子里准备放入图片