移动端页面布局项目实战弹性布局(100%布局)——拉钩网、天猫首页等比缩放布局(rem布局)——网易、淘宝首页弹性布局(100%布局)弹性布局(100%)布局的案例混合布局的案例-天猫首页弹性布局(100%)布局的特点-顶部与底部的bar不管分辨率怎么变,它的高度和位置都不变;-中间每条招聘信息不管分辨率怎么变,招聘公司的图标等信息都位于条目的左边,薪资都位于右边。这种情况css尺寸单位用px就好,不要用rem,避免增加复杂度。等比缩放布局(rem布局)等比缩放布局(rem布局)的案例-网易等比缩放布局(rem布局)的实现-网易-视口(viewport)设置:<metaname="viewport"content="initial-scale=1,maximum-scale=1,minimum-scale=1">-在html上根据不同分辨率设置不同font-size,通过js计算出来-页面里除了font-size之外的其它css尺寸都使用了rem作为单位-正文的font-size需要额外的媒介查询,并且不使用rem-当deviceWidth大于设计稿的横向分辨率时,html的font-size始终等于横向分辨率/body元素宽:因为当deviceWidth大于640时,则物理分辨率大于1280,应该去访问pc网站了。等比缩放布局(rem布局)的实现-网易
移动端页面布局实战培训课件 来自淘豆网m.daumloan.com转载请标明出处.
