自适应网站设计自适应网页制作 怎么做自适应网页

自适应网页设计怎么制作?

随着越来越多的人使用手机上网，使自适应网页设计技术变得越来越流行。

自适应网页设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。

当然，对一个新手来说可能听起来有点复杂，其实它比你想象的简单多了（前提你有css基础）。

1、在HTML头部增加viewport标签。

在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。

代码如下： <meta name="viewport" content="width=device-width, initial-scale=1" /> 这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。

IE8及其更低版本不支持media query，可以使用 media-queries.js或 respond.js脚本实现支持。

2、在CSS文件尾部增加针对不同屏幕分辨率的规则。

例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。

以下代码针对Z-Blog，WordPress相关标签名称只需修改一下即可。

@media screen and (max-device-width: 480px) { #divMain{ float:none; width:auto; } #divSidebar { display:none; } } 3、布局宽度使用相对宽度。

网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。

当然也可以不用相对宽度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度，实际上更麻烦。

4、页面使用相对字体（非必要） 在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em。

5、图片自适应（非必要） img标签的话，只需要设置 max-width:100%;或width:100%;语句为：img { max-width:98%;} css加载的background-image如何自适应大小呢，其实CSS3中是可以实现的，添加如下语句：background-size:100% 100%;

如何制作自适应手机网页

手机站比pc站简单啊，其实没有你想的这么麻烦，只要按照正常的手机显示比例来做，比如我想要手机横排显示三个图片，并且分开背景，只要在pc上横排铺平三个背景就可以，这是我做的，下方版权那有手机站的显示样式，你可以看看

自适应网页制作 怎么做自适应网页

做网站让页面自适应大小方法代码如下：一、电脑站设置网站自适应方法全屏宽度主要在于CSS代码中，将width为100%，而不是一个固定的像素值，代码如下。

手机网设置网自适应方法：在网页头部加上这样一条meta标签： 解释：width=device-width：宽度等于设备屏幕的宽度。

initial-scale=1.0：表示：初始的缩放比例。

minimum-scale=0.5：表示：最小的缩放比例。

maximum-scale=2.0：表示：最大的缩放比例。

user-scalable=yes：表示：用户是否可以调整缩放比例。