html自动适配手机,PC网站自动适配手机网页的方法技巧

自适应网页设计，对于未曾接触过此类设计的人来说，可能觉得是十分难的事情。

但是，如果你熟悉html，那么自适应设计其实只不过是在原PC端的html代码上做一些改动而已，并非一门新的技术语言。

自适应网页设计代码需要做哪些调整，归纳来说，有6个调整是需要做的。

自适应网页设计代码需要做的6大调整

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。

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

例如：