SEO学习教程网—提供SEO视频教程、SEO顾问服务、SEO培训教程、网站SEO优化诊断方案。

响应式移动端SEO网站制作设计要点

时间:2018-04-03 11:42:49 来源:未知 作者:江西SEO曾庆平 点击量:

由于市场上移动设备尺寸繁多,像苹果就有3.5寸、4.0寸、4.7寸等不同的尺寸。如何保证不同尺寸的设备访问网站时都能正常的显示呢?这时候就需要懂得如何通过代码实现响应式的网站了。
 
1、界面响应式
 
为了网站能够在不同尺寸的设备都能正常显示,江西SEO曾庆平就不能给界面设置固定的宽度。但是,为了防止界面超过某尺寸后太过难看,可以给界面设置最大宽度。
 
这样,如果访问设备的尺寸小于这个最大宽度,就按设备尺寸来显示。如果访问设备的宽度大于这个宽度,就按最大尺寸来进行显示,主要靠CSS代码来进行控制。例如整个网站的内容在class为body的div之内,可以通过下面的CSS代码来控制这个div的最大宽度。
 
.body {
 
max - width: 800px;
 
margin: 0 aut0;
 
padding: 0;
 
}
 
如果屏幕仅仅是320px,那么界面就只显示320px的宽度。如果屏幕超过800px,界面就只以800px的宽度显示了。最重要的是,使用这样CSS代码控制界而,无论屏幕宽度是多少,都能保证内容显示正常。
 
响应式移动端
 
2、图片响应式
 
很多人设计手机网站的时候,往往会发现图片没办法按照设备界而的大小自动缩放,甚至会超出界面,很影响美观。其实,解决这个问题非常简单。只需要下面一行css代码就能确保图像永远不会大于他们的父容器,代码非常简单,适用于大多数网站。
 
img { max-width:100%; }
 
要注意的是,IE6等旧的浏览器不支持max-width指令。不过一幸运的是,现在基本上智能机都是最新的IE版本了。最终效果是图片根据屏幕大小进行缩放了。
 
3、列表响应式
 
有的时候,会在手机移动站SEO设计双排列表。但是双排列表有个问题,就是万一访客的屏幕太小而列表文字过长的,会出现文字重叠或者换行错位的问题。
 
想要解决这个问题,可以运用下面的几行CSS代码解决:
 
最后效果如果屏幕太小,列表溢出的文字会自动截断并显示省略标记“.....”。
 
一般来说,做好界面、图片、列表的响应式设置之后,整个网站就能适合绝大多数的移动设备浏览了。但想完美地实现响应式效果,SEO人员必须有扎实的HTML和CSS的技术基础。否则,很可能会被某些细节的小问题卡住。
 
当前位置:SEO教程 > SEO高级教程 >

声明:本文由江西SEO和SEO教程网整理不代表个人观点,转载请注明原文,点击还能查看更多SEO培训的文章;本文网址: http://www.qingpingseo.com/seoxuexi/939.html

围观: 1000次 | 责任编辑:江西SEO曾庆平

回到顶部