署理加盟 2019全新署理方案 挣钱+省钱左右开弓,独立渠道,丰盛赢利!

您现在的方位: unibet网 > 站长学院 > 建站教程 >

CSS完成不同分辨率下款式自习惯

来历:不知道 发布时刻:2019-03-30热度:我要谈论
用户体会一直是网站优化SEOer最重视的,一个好的网页规划能给用户带来舒适的体会。而许多用于SEO优化的网站,关于笔者这样的处女座来说,画面真实太美不敢看...为了优化而优化的网站十分多,而看起来巨大上的网站往往排名比较差,网站许多内容写下JS里边的,蜘蛛不抓?...

unibet注册unibet淘宝店开业,好礼送不断

css完成网页自习惯

       用户体会一直是网站优化SEOer最重视的,一个好的网页规划能给用户带来舒适的体会。而许多用于SEO优化的网站,关于笔者这样的处女座来说,画面真实“太美”不敢看...为了优化而优化的网站十分多,而看起来巨大上的网站往往排名比较差,网站许多内容写下JS里边的,蜘蛛不抓取。unibet网SEO博客选用的是PC移动端自习惯的办法,并没有过多的选用JS作用,网站翻开速度快。主张选用集成化的JS封包,功用丰厚,代码简略。

       纯CSS完成PC浏览器(显现屏幕)或移动端浏览器宽度款式的自习惯。将用到@media款式进行判别,不支撑IE9以下版别,需求增加一个JS。

       一般咱们规划网页的时分PC端宽度都在900-1400像素之间,移动端宽度在320-640像素之间,用@media款式挑选能够让PC端和移动端自习惯,对简略的文章、博客类网站能够不需求独自开发移动端。移动端和PC端需求存在一一对应的联络,才干提交适配联络,网站权重才干不被涣散,独自的移动端优化能够参阅文章《手机端移动站优化战略》。

css款式挑选器写法如下:

@media screen and (判别特点){
css款式
}

      不过多解说, 看事例:

  <style>
.main{height:400px;border:1px solid #eee}
@media screen and (min-width:1201px){
.main{width:1200px}
}
/*设置在屏幕(浏览器)不小于1201px时,main的宽度显现宽度为1200px*/
@media screen and (max-width:1200px){
.main{width:900px}
}
/*设置在屏幕(浏览器)不大于1200px时,main的宽度显现宽度为900px*/
</style>

必要阐明:

       留意css代码的先后顺序,有必要尺度由大到小。这儿还要说到书写格局也要依照上面的这样写,悉数用英文字符,也可写成紧缩的款式:@media screen and (max-width:1200px){.main{width:900px}}  结果是有用,有些失效的原因留意查看“and”的前后是否都有一个空格字符。

       max-widht指展现的最大宽度,一般是浏览器窗口宽度。

       max-device-width是指所展现运用的设备支撑宽度,如一般电脑分辨率1280px,手机等移动设备支撑展现宽度(安卓移动设备宽度如360 、480px)等。这个需求在</head>之前引证一段代码:

  <meta name="viewport" content="width=device-width, initial-scale=1"  />

IE9以下兼容

       为了兼容IE9以下版别浏览器,需求参加一个google的JS,或许下载到本地,再调用。把以下代码加到</head>之前。

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]--> 

完好html代码示例

       其他p能够把款式写在同一个规矩下,这样写在同一个css文件或许写在html下,能够削减网页加载链接次数,速度快,进步用户体会。顶部的声明要这样写<!DOCTYPE html>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>unibet网unibet网博客</title>
  <style>
   .main{height:400px;border:1px solid #eee}
   .head{height:100px;margin:0 auto;background:#c00}
   @media screen and (min-width:1201px){
   .main{width:1200px}
   .head{width:1200px}
   }
   @media screen and (max-width:1200px){
   .main{width:900px}
   .head{width:900px} 
   }
 </style>
 <!--[if lt IE 9]>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
 <![endif]-->
</head>
<body>
 <p class="main">DIV宽度会随浏览器宽度改动哦,试试改动浏览器宽度</p>
<p class="head">DIV宽度会随浏览器宽度改动哦,试试改动浏览器宽度1</p>
</body>
</html> 

本文地址:https://www.m88nob1.com/news/1455.html

    责任编辑:unibet网

    宣布谈论

    谈论列表(条)