网页自适应设计需要做的调整_html/css_WEB-ITnose

1、 允许或禁止调整页面大小

iOS和Android浏览器都基于webkit核心，这两种浏览器以及其他的很多浏览器都支持viewport meta元素覆盖默认的画布缩放设置，只需在HTML的

标签中插入一个标签，标签中可以设置具体的宽度(如像素值)或者缩放比例2.0(设备实际尺寸的两倍)，下面是将一个页面放大到设备实际尺寸两倍显示的meta标签示例:

如果不允许调整页面大小，那么把user-scalable=yes改为user-scalable=no，如：

2、将网页修改为百分比布局

自适应网页是绝对不可以使用固定尺寸来指定布局范围的，而是用百分比布局。

当某个浏览窗口处于媒体查询固定的范围之外，网页就需要水平滚动才能完整浏览，而通过百分比布局可以页面元素根据窗口大小在一个又一个媒体查询之间灵活修正样式，具体来讲，就是css代码不会指定具体像素宽度：width:xxx px，而是会指定一个百分比宽度：width:xx%，或者直接就是width:auto。

这里大家可以根据一个简易的公式将固定像素宽度转换成对应的百分比宽度： 目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度。

例如：