将网站更改为自适应网页的具体步骤

将网站更改为自适应网页的具体步骤：

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

<meta name="viewport" content="width=device-width, initial-scale=1" />

这段代码支持Chrome、Firefox、IE9以上的浏览器，但是不支持IE8及以下的浏览器。

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。

根据上述几点内容来看，当你使用上面的方法的时候，你就能够发现从iPhone手机浏览到体验更佳的页面，但是需要解决这样一个问题，顶部导航栏navbar显示存在着问题，换行后被下面的文章遮挡了，这个问题应该如何解决（在导航栏divNavbar 的样式中加入 “overflow：hidden” 一行就可以解决这个问题了！）

按照上面几步进行修改，就可以将一个网站轻而易举的修改成为一个可以适合多种设备不同屏幕宽度的自适应网页了。

将网站更改为自适应网页的具体步骤相关推荐

让每个网站改成自适应网页的实现方法！
自适应网页设计可使网站在多种浏览设备(从桌面电脑显示器到智能手机或其他移动产品设备)上具有更好的阅读体验. 1.在HTML头部增加viewport标签. 在网站HTML文件的开头,增加viewport ...
JS：PC网站转化为手机自适应网页
说明:已完成网站pc端开发,后因客户需要手机端,遂要实现以下功能: pc电脑访问显示原pc端网页: 手机端访问该网页,自动跳转至手机版网页方法一: 不改变源码,web网页转化手机自适应网页: 打开你 ...
将PC网站转化为手机自适应网页或者自己制作手机自适应网页其实很简单，可以利用meta标签声明。
web网页转化手机自适应网页三步走: 1.打开你需要制作手机网页的html或者php等等网页源码文件.在<head></head>之间加入meta标签. 2.向浏览器声明该网页 ...
转自CSDNattilax的专栏：自适应网页设计跟响应式设计的区别跟原理and实践总结...
响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 设计思路Mobile First 2 #---手机and平板分辨率 ...
[转]自适应网页设计（Responsive Web Design）
本文转自:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 作者: 阮一峰日期: 2012年5月 1日随着3G的普 ...
自适应网页设计/响应式Web设计（Responsive Web Design）
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
自适应网页设计（Responsive Web Design）响应式设计
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
自适应网页设计(转)
自适应网页设计(Responsive Web Design) 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才 ...
自适应网页设计（Responsive Web Design）（转）
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

将网站更改为自适应网页的具体步骤

将网站更改为自适应网页的具体步骤相关推荐

最新文章

热门文章