西北马二最代码的gravatar头像
西北马二最代码2017-07-31 12:58:28
网页自适应学习

1、“网页自适应”的概念:

        2010年,由Ethan Marcotte提出“网页自适应”(Responsive Web Design)这个名词,指可以自动识别屏幕宽度并做出相应调整的页面设计。

        下面给大家一些示例网站,有时间可以去查看,都是很不错的“网页自适应”的案例。https://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html#

        https://mediaqueri.es/

        接下来给的这个链接,可以让我们测试不同分辨率下的页面效果:http://www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/

2、允许网页宽度自我调整

        第一步,在网页头部加入一行viewport标签:

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

          viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

        所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js

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

3、不适用绝对宽度

     由于网页会根据屏幕宽度调整布局,所以在css样式中不能设置绝对宽度,即不能使用绝对宽度的布局,也不能使用绝对宽度的元素。

     具体说,css样式不能写成下面这样子:

width: xxxpx;

      所以可以用百分比或者auto来进行宽度设置:

width: xx%; 或者
width: auto;

4、相对大小的字体设置

      字体也不能使用绝对大小(px),而应该使用相对大小(em)。

  body {
    font: normal 100% Helvetica, Arial, sans-serif;
  }

      上面代码的意思,是默认字体大小为页面大小的100%,即16px。

 h1 {
    font-size: 1.5em; 
  }

      h1大小为默认大小的1.5倍,即24px。

  small {
    font-size: 0.875em;
  }

      small大小为默认大小的0.875倍,即14px。

5、使用“流动布局”(fluid grid)

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

  .main {
    float: right;
    width: 70%; 
  }
  .leftBar {
    float: left;
    width: 25%;
  }

     float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

     另外,绝对定位(position: absolute)的使用,也要非常小心。

6、选择加载css

     "自适应网页设计"的核心,就是CSS3引入的Media Query模块。

      它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

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

     上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

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

       如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

       除了用html标签加载CSS文件,还可以在现有CSS文件中加载。

@import url("tinyScreen.css") screen and (max-device-width: 400px);

7、css的@media规则

      同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

  @media screen and (max-device-width: 400px) {
    .column {
      float: none;
      width:auto;
    }
    #sidebar {
      display:none;
    }
  }

      上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

8、图片的自适应

    除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放

    这只需要一行css代码:

img{ max-width: 100%; }

    这行代码对于大多数嵌入网页的视频也有效,所以可以写成:

img, object { max-width: 100%;}

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

img { width: 100%; }

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

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

     或者,Ethan Marcotte的imgSizer.js

addLoadEvent(function() {
    var imgs = document.getElementById("content").getElementsByTagName("img");
    imgSizer.collate(imgs);
  });

不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。

分享到:

最近浏览
陌路难飞8月17日
最代码贡献等级说明
yzcan8月17日
最代码贡献等级说明
kluanlee8月17日
暂无贡献等级
wangyakun8158月12日
最代码贡献等级说明
敏哥gege LV18月12日
最代码贡献等级说明
sucaihuo8月11日
暂无贡献等级
aaa001230458月11日
暂无贡献等级
kildee8月10日
暂无贡献等级
151233860308月10日
最代码贡献等级说明
shawoo8月10日
暂无贡献等级
自有公道8月9日
暂无贡献等级
liusi3318月9日
暂无贡献等级
9868715108月9日
最代码贡献等级说明
tcx17488月9日
暂无贡献等级
hulang8月8日
暂无贡献等级
jien0078月8日
最代码贡献等级说明
General8月8日
最代码贡献等级说明
fjhj145518月8日
暂无贡献等级
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友