保定SEO,保定网站制作,保定微信小程序

SEO技术流:自适应网站网页代码上对百度友好的调整

发布时间:2019-12-04 09:43 文章来源:建站 作者:建站小能手 关注度:次 


「导读」:自适应站点对百度友好的关键:applicable-device标注应该怎么写,在使用百度站长平台链接提交工具的sitemp进行提交时,要做mobile type标记

自适应网站如何做到对百度友好

        自适应网站又叫响应式网站,它可以自动识别终端设备屏幕的大小从而做出相应调整的网页。随着移动端的逐渐普及,对于网站的要求也更加多元化,所以越来越多的人为了保持网站的统一性而选择做自适应网站,这一类站点也更加适应优化的趋势。百度对于自适应网站的代码进行了一些规范,大家可以根据这些规范进行设计开发及调整:

1、 阻止移动浏览器自动调整页面大小

Android浏览器都基于webkit核心,这两种浏览器以及其他的很多浏览器都支持viewport meta元素覆盖默认的画布缩放设置,只需在标签中插入一个 标签中可以设置具体的宽度或者缩放比例设备实际尺寸的两倍,下面是将一个页面放大到设备实际尺寸两倍显示的  

meta标签示例:

< meta name=”viewport” content=”initial-scale=2.0,width=device-width”/>

2、将网页修改为百分比布局

当某个浏览窗口处于媒体查询固定的范围之外,网页就需要水平滚动才能完整浏览,而通过百分比布局可以页面元素根据窗口大小在一个又一个媒体查询之间灵活修正样式,具体来讲,就是代码不会指定具体像素宽度:width:xxx px;而是会指定一个百分比宽度:width:xx%;或者直接就是width:auto;这里大家可以根据一个简易的公式将固定像素宽度转换成对应的百分比宽度:目标元素宽度上下文元素宽度百分比宽度

例如:

#wrapper {

margin-right: auto;

margin-left: auto;

width: 960px;

#header {

margin-right: 10px;

margin-left:10px;

width: 940px;

为百分比的header#header {

margin-right: 10px;

margin-left: 10px;

width: 97.916667% /* 940 ÷ 960 */

}

3、用em替换px

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

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)

“流动布局”指的是各个区块的位置都浮动,不是固定不变的。

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

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

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

5、Media Query技术的使用

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

< link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />

同样可以创建多个样式表,以适应不同设备或者不同分辨率的宽度范围,当然更有效的做法是将多个Media Query整合在一个样式表文件中:

@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;

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

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

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

< !--[if lt IE 9] >

< script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js>

< ![endif]-- >

6、设计响应式图片

有很多同比缩放图片的技术,其中有不少是简单易行的,比较流行的方法是使用CSS的max-width属性:

img { max-width: 100%;}

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

img { width: 100%; }此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:

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

或者,Ethan Marcotte的imgSizer.js。

addLoadEvent(function() {

var imgs =

ocument.getElementById("content").getElementsByTagName("img");

imgSizer.collate(imgs);

如果有条件的话,最好能根据屏幕的不同大小,加载不同分辨率的图片。

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

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

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

<meta name="applicable-device" content="pc,mobile" >

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

2,在使用百度站长平台链接提交工具的sitemp进行提交时,要做mobile type标记,具体取值:

其他网页取值如下:

< mobile:mobile/> :移动网页

< mobile:mobile type="mobile"/> :移动网页

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

无该上述标签表示为PC网页

文章出处:百度站长平台

免责声明:部分文章信息来源于网络以及网友投稿,本网站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性,如本站文章和转稿涉及版权等问题,请作者及时联系本站,我们会尽快处理。

文章标题:SEO技术流:自适应网站网页代码上对百度友好的调整


文章地址:http://www.seo121.net/xinwen-jianzhan/290.html

服务支持

中国SEO,即自然搜索排名(SEO)不仅可以为企业带来免费精准流量从而促进企业的互联网市场培育与客户拓展。

耳熟能详的网上知名网站,如京东黄页88等,因SEO而“声名鹊起”, 利用SEO技术截获搜索引擎免费流量你也可以!

合作流程

提出需求→网站报价/关键词报价→签订合同(同时提供基础资料)→网站制作→确定没有修改网站上线→SEO优化开始→网站关键词达标确认→进入维护期

常见问题

提供什么是定制网站及模板网站?报价如何?优化周期多久?等网站建设及SEO优化的常见问题。

售后保障

我们知道:做互联网就是做服务,就是做售后。我们免费提供网站备案、QQ远程支持、电话支持、后台操作培训、合作期间免费维护,根据故障情况10分钟响应。