【响应式网页设计】自适应站点如何做到对百度友好

2020年9月13日03:30:58
评论
0

  自顺应也叫相应式,指可以自动辨认屏幕宽度、并做出响应调解的网页计划。今朝被越来越多的站点所行使。同时百度也果真宣称勉励各人用HTML5技能打造在PC站和移动站都能让用户有精采体验的站点。那么自顺应站点在代码上必要做出哪些调解可以对百度越发友爱呢?我们来看看皮皮鲁网SEO认真人蒋飞的分享。

  一、什么样的网站得当做自顺应

  自顺应网页计划(Responsive Web Design)是指可以自动辨认终端装备屏幕的巨细从而做出响应调解的网页计划要领。这种网页计划要领美满办理了如安在差异巨细的收集装备上泛起同样的网页结果。各人公认自顺应至少有4个甜头:晋升用户体验;PC端和移动端SEO保持同等;停止一再内容和堕落内容链接同一。

  而自顺应较量明明的缺陷是,开拓本钱较量高,尤其是要构建包括特殊编程的伟大的自顺应网站,所需的时刻会较量长。假如网站需求较简朴,有很多开源模板可供选择。

  对付已经较量成熟PC网站来说,假如要实现全站的自顺应,有也许必要推掉原本全部的代码举办重构,时刻和技能本钱都较量大,并且假如一个网站有多个portal(进口),会大大增进架构计划的伟大度,以是此刻有许多网站只在移动端实现了相应式机关计划。

  二、自顺应网页代码上必要做出哪些调解

  1、 阻止移动赏识器自动调解页面巨细

  iOS和Android赏识器都基于webkit焦点,这两种赏识器以及其他的许多赏识器都支持viewport meta元素包围默认的画布缩放配置,只需在HTML的<head>标签中插入一个<meta>标签,<meta>标签中可以配置详细的宽度(如像素值)可能缩放比例2.0(装备现实尺寸的两倍),下面是将一个页面放大到装备现实尺寸两倍表现的meta标签示例:

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

  2、将网页修改为百分比机关

  当某个赏识窗口处于媒体查询牢靠的范畴之外,网页就必要程度转动才气完备赏识,而通过百分比机关可以页面元素按照窗口巨细在一个又一个媒体查询之间机动批改样式,详细来讲,就是css代码不会指定详细像素宽度:width:xxx px;而是会指定一个百分比宽度:width:xx%;可能直接就是width:auto;这里各人可以按照一个浅显的公式将牢靠像素宽度转换成对应的百分比宽度:方针元素宽度 ÷ 上下文元素宽度 = 百分比宽度

  譬喻:

  <div id =”wraper”>

  <divid = “header”></div>

  </div>

  #wrapper {

  margin-right: auto;

  margin-left: auto;

  width: 960px;

  }

  #header {

  margin-right: 10px;

  margin-left:10px;

  width: 940px;

  }

  转换为百分比的header区块的css为:

  #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=http://seo.baidutop123.com/seoyh/"shetland.css" />

  同样可以建设多个样式表,以顺应差异装备可能差异判别率的宽度范畴,虽然更有用的做法是将多个Media Query整合在一个样式表文件中:

[email protected] only screen and (min-devece-width: 320px) and (max-device-width: 480px) {

  /* Styles */

  }

[email protected] screen and (min-width: 600px) {

  .hereIsMyClass {

  width: 30%;

  float: right;

  }

  上面的代码中界说的样式类只有在赏识器屏幕宽度高出600px时才会有用。

宜家网
  • 本文由 发表于 2020年9月13日03:30:58
  • 转载请务必保留本文链接:https://www.yjro.com/15508.html

发表评论