SEO篇章:专注于SEO优化,分享最新搜索引擎新闻动态!再牛逼的技术,也抵不过冒着傻气的坚持!

SEO优化 > SEO资讯 / 移动站如何制作响应式页面

移动站如何制作响应式页面

SEO篇章 2016-08-31 13:44:07 SEO资讯

  我们上一篇说到,响应式的网站更有利于SEO。那如何建立一个响应式的网站呢?如果希望建一个复杂的响应式网站,这篇文章很难帮到你。但是我们可以给你一些常见响应式问题的解决方...

我们上一篇说到,响应式的网站更有利于SEO。那如何建立一个响应式的网站呢?如果希望建一个复杂的响应式网站,这篇文章很难帮到你。但是我们可以给你一些常见响应式问题的解决方案。

一、界面的响应式

我们的网站需要根据屏幕的大小,自动缩放,完全适应页面的变化。这里可以用到一段代码

.body{

  max-width:800px;

  margin:0 auto;

  padding:0;

}

这段css代码定义我们网站主体最大宽度是800px,小于800px会自动缩小,大于800px的屏幕,只显示800px,网站主体内容是居中的。


二、图片的响应式

我们的发现在手机端的图片经常超出屏幕的大小,这是因为你图片并没有跟着屏幕一起缩放。这里我们用到的代码是

img {max-width:100%;}

这段css代码就确定了图片永远不会大于他们的父容器了。


三、列表的响应式

在手机站双排列表,有的时候会出现列表文字重叠或者换行错位的问题。这是因为用户的屏幕太小导致的。要解决这个问题,用可以下面的这段css代码

li{

 float:left;

 diaplay:inline-block;

 overflow:hidden;

 text-overflow:ellipsis;

 whtie-space:nowrap;

 width:49%;

}

这段代码的意思是,如果屏幕太小,列表溢出的文字会自动截断并显示省略标记“……”


一般我们最好了界面、图片和列表的响应式设置之后,整个网站就能适合绝大数的移动设备访问了。

本文地址:https://www.seopz.com/seozixun/1779.html

当前位置:SEO优化 > SEO资讯 > 移动站如何制作响应式页面

Tags:搜索引擎算法

搜索
网站分类
标签列表