自适应网页设计_自适应网页设计四步搞定

更新时间:2020-04-17 来源:苹果手机 点击:

【www.hzclsc.cn--苹果手机】

自适应的布局未来会成为潮流,这种设计同时满足了

1.根据用户窗口大小的不同做出改变

2.在一定宽度范围内提供稳定的视觉体验

缺点则有对老旧和非标准浏览器的兼容性较差,对产品定义和设计能力的要求较高,对页面做出调整时需要同时改变多种尺寸下的布局
下面就说说自适应网页设计的方法:

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

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

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

这段代码支持Chrome、Firefox、IE9以上的浏览器,但不支持IE8以及低于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。

根据上面讲述的几点内容,我针对我博客的CSS进行了一些修改,发现可以从iPhone手机浏览到体验更佳的页面,但有一个问题没有解决,就是顶部导航栏navbar显示有问题,换行后被下面的文章盖住了,不知道怎样能更好地解决这个问题。

总之,根据上面四步进行修改的话,可以很简单地将一个网站修改为适合多种设备浏览的页面,这对于通过手机访问网站的用户来说,的确是一件好事。

本文来源:http://www.hzclsc.cn/pingguo/53180.html

推荐内容

为您推荐

[铁路大亨4]铁路大亨2火车故障怎么办 铁路大亨2火车故障解决方法

铁路大亨2火车故障怎么办?铁路大亨2中火车随着使用时间的增长,故障率会不断地提高。但如果发生故障了该怎么解决,又要如何去防止呢?下面就一起来看看铁路大亨2火车故障解决方法吧。因为出了故障的火车是无法升策略与战棋

2020-12-19 07:04:36   铁路大亨2秘籍   铁路大亨手机版  

[staxel下载中文]staxel玩不了怎么办 staxel进不去解决方法

staxel玩不了怎么办?一些玩家朋友们在进入游戏中会出现弹窗或打不开运行程序的问题,导致无法正常进入游戏,下面我们就来分享 一下staxel进不去解决方法一览,希望对各位有所参考。staxel进不去模拟游戏

2020-12-18 23:05:07   staxel手机版   staxel手机版下载  

[努比亚手机换屏多少钱]努比亚手机怎么换字体 nubia手机换字体教程

努比亚手机用久了许多用户朋友都嫌自带字体不好看,但又不知道努比亚手机怎么换字体,其实把手机初始字体设置成其他字体十分容易只需要短短3分钟,好奇的用户马上点击查看nubia手机换字体教程来更换您喜欢的教你一招

2020-12-18 17:04:52   努比亚手机怎么拆  

【staxel下载中文】staxel手柄怎么设置 staxel手柄设置教程

staxel手柄怎么设置?不少玩家朋友们不知道在游戏中要如何了设置手柄的操作,下面我们就来分享一下staxel手柄设置教程一览,希望对还不知晓的玩家朋友们有所参考和帮助。staxel手柄设置教程:1 模拟游戏

2020-12-18 17:04:52   staxel手机版   staxel手机版下载  

领地人生mmo下载_领地人生MMO闪退怎么办 领地人生MMO闪退解决方法

领地人生MMO闪退怎么办?不少玩家朋友们在进入游戏的途中会出现弹窗或闪退的问题,导致无法正常运行游戏,下面我们就来看一看领地人生MMO闪退解决方法,希望对各位有所参考。领地人生MMO闪退解决方法:一直模拟游戏

2020-12-16 23:04:43   领地人生mmo手机版