自适应网站如何做好优化？

2022-12-25 分(fēn)类：自适应网站

自适应也叫响应式，指可(kě)以自动识别屏幕宽度、并做出相应调整的网页设计。目前被越来越多(duō)的站点所使用(yòng)。同时百度也公开宣称鼓励大家用(yòng)HTML5技术打造在PC站和移动站都能(néng)让用(yòng)户有(yǒu)良好體(tǐ)验的站点。那么自适应站点在代码上需要做出哪些调整可(kě)以对百度更加友好呢(ne)？

一、什么样的网站适合做自适应

自适应网页设计(Responsive Web Design)是指可(kě)以自动识别终端设备屏幕的大小(xiǎo)从而做出相应调整的网页设计方法。这种网页设计方法好解决了如何在不同大小(xiǎo)的网络设备上呈现同样的网页效果。大家公认自适应至少有(yǒu)4个好处:提升用(yòng)户體(tǐ)验；PC端和移动端SEO保持一致；避免重复内容和出错内容；链接统一。

而自适应比较明显的缺陷是，开发成本比较高，尤其是要构建包含额外编程的复杂的自适应网站，所需的时间会比较長(cháng)。如果网站需求较简单，有(yǒu)许多(duō)开源模板可(kě)供选择。

对于已经比较成熟PC网站来说，如果要实现全站的自适应，有(yǒu)可(kě)能(néng)需要推掉原来所有(yǒu)的代码进行重构，时间和技术成本都比较大，而且如果一个网站有(yǒu)多(duō)个portal（入口），会大大增加架构设计的复杂度，所以现在有(yǒu)很(hěn)多(duō)网站只在移动端实现了响应式布局设计

。

二、自适应网页代码上需要做出哪些调整

1、阻止移动浏览器自动调整页面大小(xiǎo)

iOS和Android浏览器都基于webkit核心，这两种浏览器以及其他(tā)的很(hěn)多(duō)浏览器都支持viewport meta元素覆盖默认的画布缩放设置，只需在HTML的<head>标签中插入一个<meta>标签，<meta>标签中可(kě)以设置具體(tǐ)的宽度(如像素值)或者缩放比例2.0(设备实际尺寸的两倍)，下面是将一个页面放大到设备实际尺寸两倍显示的meta标签示例:<meta name=”viewport” content=”initial-scale=2.0,width=device-width”/>

2、将网页修改為(wèi)百分(fēn)比布局

当某个浏览窗口处于媒體(tǐ)查询固定的范围之外，网页就需要水平滚动才能(néng)完整浏览，而通过百分(fēn)比布局可(kě)以页面元素根据窗口大小(xiǎo)在一个又(yòu)一个媒體(tǐ)查询之间灵活修正样式，具體(tǐ)来讲，就是css代码不会指定具體(tǐ)像素宽度：width:xxx px;而是会指定一个百分(fēn)比宽度：width:xx%;或者直接就是width:auto;这里大家可(kě)以根据一个简易的公式将固定像素宽度转换成对应的百分(fēn)比宽度：目标元素宽度 ÷ 上下文(wén)元素宽度 = 百分(fēn)比宽度

例如：

</div>

#wrapper {

margin-right: auto;

margin-left: auto;

width: 960px;

}

#header {

margin-right: 10px;

margin-left:10px;

width: 940px;

}

转换為(wèi)百分(fēn)比的header區(qū)块的css為(wèi)：

#header {

margin-right: 10px;

margin-left: 10px;

width: 97.916667% /* 940 ÷ 960 */

}

3、用(yòng)em替换px

同样，目标元素宽度 ÷ 上下文(wén)元素宽度 = 百分(fēn)比宽度这个公式也适用(yòng)于将文(wén)字的像素单位转换為(wèi)相对单位，值得注意的是，现代浏览器的默认文(wén)字都是16像素，因此一开始给body标签应用(yòng)下列任何一条规则所产生的效果都一样:

font-size: 100%;

font-size:16px;

font-size: 1em;例如某网站网站标题相应的样式:

#logo {

display: block;

padding-top: 75px;

color: #0d0c0c;

font-family: Arial;

font-size: 48px;

}

修改后的样式如下:

#logo{

display: block;

padding-top: 75px;

color: #0d0c0c;

font-family:Arial;

font-size:3em /* 48 ÷ 16 */

}

4、流动布局（fluid grid）的使用(yòng)

“流动布局”指的是各个區(qū)块的位置都浮动，不是固定不变的。

.main {float: right;width: 70%;}

.leftBar {float: left;width: 25%;}

这么做的好处是，如果宽度太小(xiǎo)，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向溢出，避免了水平滚动条的出现，大大提升了用(yòng)户的阅读體(tǐ)验。另外，绝对定位（position:absolute）的使用(yòng)，也要非常小(xiǎo)心。

5、Media Query技术的使用(yòng)

在自适应设计的技术中，css3支持css2.1定义的媒體(tǐ)类型，同时添加了很(hěn)多(duō)涉及媒體(tǐ)类型的功能(néng)属性，包括max-width(大宽度)，device-width(设备宽度，orientation(屏幕定向:横屏或竖屏)，因此可(kě)以通过Media Query加载相应的CSS文(wén)件. 例如，下面代码定义了如果页面通过屏幕呈现，并且屏幕宽度不超过480px,则加载shetland.css

同样可(kě)以创建多(duō)个样式表，以适应不同设备或者不同分(fēn)辨率的宽度范围，当然更有(yǒu)效的做法是将多(duō)个Media Query整合在一个样式表文(wén)件中:

@media only screen and (min-devece-width: 320px) and (max-device-width: 480px) {

/* Styles */

}

@media screen and (min-width: 600px) {

.hereIsMyClass {

width: 30%;

float: right;

}

上面的代码中定义的样式类只有(yǒu)在浏览器屏幕宽度超过600px时才会有(yǒu)效。

因此，使用(yòng)min-width和max-width可(kě)以同时判断屏幕尺寸与浏览器实际宽度，如果希望通过Media Query作用(yòng)于某种特定设备，但忽略在其上运行的浏览器是否由于没有(yǒu)大化尺寸与设备屏幕尺寸不一致，则可(kě)以使用(yòng)max-device-width和max-device-width属性来判断设备本身屏幕尺寸。

Media Query不是唯一的解决方案，同样可(kě)以通过Javascript来实现自适应设计，特别是某些旧浏览器无法好支持CSS3的MediaQuery时，它可(kě)以作為(wèi)备选方案。当然，我们仍然能(néng)借助专业的Javascript库来帮助旧浏览器(IE5+,Firefox 1+,Safari 2等)支持CSS3的Media Queries.使用(yòng)方法:下载css3-mediaqueries.js,然后在页面中调用(yòng)它即可(kě)，例如:

<!–[if lt IE 9]>

<![endif]–>

6、设计响应式图片

有(yǒu)很(hěn)多(duō)同比缩放图片的技术，其中有(yǒu)不少是简单易行的，比较流行的方法是使用(yòng)CSS的max-width属性：

img { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

img { width: 100%; }此外，windows平台缩放图片时，可(kě)能(néng)出现图像失真现象。这时，可(kě)以尝试使用(yòng)IE的专有(yǒu)命令：

img { -ms-interpolation-mode: bicubic; }

或者，Ethan Marcotte的imgSizer.js。

addLoadEvent(function() {

var imgs =

ocument.getElementById(“content”).getElementsByTagName(“img”);

imgSizer.collate(imgs);

});

如果有(yǒu)条件的话，好能(néng)根据屏幕的不同大小(xiǎo)，加载不同分(fēn)辨率的图片。

三、自适应站点对百度友好的关键

1，applicable-device标注应该怎么写

有(yǒu)了自适应设计的网页，还要照顾到对百度友好的设计，即告诉百度“我是自适应页面”方便百度进行识别校验。方法也很(hěn)简单，只要在上面viewport标签下面再添加一个applicable-device标签就行：

表示页面同时适合在移动设备和PC上进行浏览。

2，在使用(yòng)百度站長(cháng)平台链接提交工具的sitemp进行提交时，要做mobile type标记，具體(tǐ)取值：

<mobile:mobile type=”pc,mobile”/>

其他(tā)网页取值如下：

<mobile:mobile/> ：移动网页

<mobile:mobile type=”mobile”/> ：移动网页

<mobile:mobile type=”htmladapt”/>：代码适配

无该上述标签表示為(wèi)PC网页

网站题目：自适应网站如何做好优化？
标题链接：

网站建设、网络推广公司-创新(xīn)互联，是专注品牌与效果的网站制作，网络营销seo公司；服務(wù)项目有(yǒu)自适应网站等

声明：本网站发布的内容（图片、视频和文(wén)字）以用(yòng)户投稿、用(yòng)户转载内容為(wèi)主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文(wén)章观点不代表本网站立场，如需处理(lǐ)请联系客服。電(diàn)话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新(xīn)互联