自适应网站的的制作经验

麦田7年前 (2015-07-05)工作笔记176

本文写自2015年,最近更新在2019年9月,长期保持最新技术!


手机上网的用户已经超过电脑用户,电脑以及被普通用户淘汰!制作自适应网站,让手机轻松浏览,已经刻不容缓!


自适应网站实现的方式有两个


一、做两个网站,一个电脑版,一个手机版。


网页自动判断用户设备,自动跳转到适配的网站。比如浏览小米的官网,电脑打开的是:www.mi.com,手机打开的是:m.mi.com(不需要用户选择,自动跳转)


这种方案的好处是自由度高,缺点是要做两个网站,工作量大。


二、谷歌推荐的方案是:一个网站,通过自适应代码,适配所有设备。


本人喜欢的是这个自适应方案,方法如下:


1、</head>之前写:


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


2、字体大小不变,建议使用px,这点与网上的教程不同;


3、宽度设置:如果之前的是900px,那修改成:width:100%;max-width: 900px;


4、图片设置:img{max-width: 100%;height: auto;width: auto\9;margin:5px 0;}


参考了很多网站资料,大多数是互相复制粘贴,没有参考价值的。


以上方法是经过搜索和琢磨,总结出来的宝贵经验,本站就是采用这个方法的典范。无论是电脑还是手机浏览,显示效果都很好。


你可能遇到的问题


1、自适应网页还有很多叫法,比如:响应式网页布局、流式设计、弹性布局、塑料布局、流体设计、跨设备设计以及弹性设计等等;


2、如果你的网站使用Text-Indent,手机看网页会出现图片靠右撑破边框的情况,处理方法:


首行缩进和自适应网页的冲突


3、正文设置padding:15px,会出现横向滚动条,解决方法是:


在上级CSS中添加width:100%;max-width: 900px,需要用到padding的css只需要添加max-width: 900px,或者不添加。


4、导航条如果是图片,做完以上自适应设置后,在手机端图片的宽度不是全部显示。


解决方法是在css中加入:


#menu{

background: url(menubg.jpg) no-repeat 0 0;

background-size:100%100%; /这段是关键,规定背景图像的尺寸/

width:100%;

max-width: 950px;

}


5、禁止搜索转码,声明网站已经自适应


2022年3月6日更新:现在几乎所有程序,包括目前在用的ZBLOG已经实现了自适应功能,以上资料的价值变低了。

相关文章

手机网页点击拨打电话的代码

有些电商的手机网站,经过添加特殊链接,可以让顾客点击电话号码直接拨号,实现方法如下:1、比如打给1008610086<a href="tel:10086">10086&...

手机网页设置点按或滑动整屏翻页

我使用手机浏览网站比较少,近期有资料需要在手机上阅读,如果用手一点一点往下翻网页,阅读体验不好,所以我在想把我的网页设置为在手机上点按或滑动,可以整屏翻页,就像在Kindle上阅读文章一样。经过两个小...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。