码迷,mamicode.com
首页 > 移动开发 > 详细

移动web中的流式布局和viewport知识介绍

时间:2016-09-15 20:26:26      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

1   流式布局

其实  流式布局  就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。

这样的布局方式  就是移动web开发使用的常用布局方式

2    Viewport

  1. 我们猜想下pc页面在移动设备上显示情况。

放不下,缩放?

  1. 我们测试下pc页面在移动设备上显示。

默认的缩放的显示的

  1. 认识viewport

在移动端用来承载网页的这个区域,就是我们的视觉窗口,viewport(视口),这个区域可是设置高度宽度,可是按比例放大缩小,而且能设置是否允许用户自行缩放。

width:宽度设置的是viewport宽度,可以设置device-width特殊值

initial-scale:初始缩放比,大于0的数字

maximum-scale:最大缩放比,大于0的数字

minimum-scale:最小缩放比,大于0的数字

user-scalable:用户是否可以缩放,yes或no(1或0);

用meta标签把viewport的宽度设为device-width,同时initial-scale=1,user-scalable = 0就构建了一个标准的移动web页面

移动web中的流式布局和viewport知识介绍

标签:

原文地址:http://www.cnblogs.com/lsy0403/p/5875235.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!