151-6663-3273
0532-80961772
手机网站建设自适应网页设计四个步骤
来源: 莱西网站建设 助创网络科技     发布时间:2019-09-02

1.依据用户窗口大小的不同做出改动

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

缺陷则有对老旧和非规范阅读器的兼容性较差,对产品定义和设计才能的请求较高,对页面做出调整时需求同时改动多种尺寸下的规划 下面就说说自顺应网页设计的办法:

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

在网站html文件的开头,增加viewport meta标签通知阅读器视口宽度等于设备屏幕宽度,且不停止初始缩放。代码如下:

这段代码支持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.qdlaixi.net 如转载请注明出处!

Copyright © 2002-2020 青岛助创网络科技有限公司 版权所有 备案号:鲁ICP备17047700号-6 网站地图

服务热线:151-6663-3273 - 0532-80961772

联系:王经理  

电话:151-6663-3273

座机:0532-80961772

邮编:266600

地址:中国-山东-青岛-莱西

青岛莱西网站制作公司找助创网络!
151-6663-3273
tel151-6663-3273