码迷,mamicode.com
首页 > 其他好文 > 详细

响应式设计的点点

时间:2014-12-02 20:35:11      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:style   blog   ar   color   使用   sp   on   div   log   

   移动web已经是大势所趋,所占份额迅猛增加。如果没有足够时间和精力做一套完全全新的移动端程序,那么,响应式设计也许是个不错的选择。不过,如果有条件并且需要移动端网页,移动端的很多优势还是不可替代的,比如定位功能。

  响应式设计,使得可以使用同一网站在智能手机、电脑及其他设备上完美显示。它可以根据用户的屏幕尺寸,合理的为现在的和将来的设备提供好的浏览体验。

  viewport

  viewport指的是浏览器窗口内的内容区域,即网页实际显示的区域,而屏幕尺寸是指设备的物理显示区域。可以阻止浏览器自动调整页面大小:

  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

  不过一般不会阻止用户手动缩放页面大小。

  media-query

  media query可以为特定的输出设备定制显示效果。已经得到了很多浏览器的大力支持。在不支持的浏览器IE6-8中,也可使用respond.js这个polyfill.

  一些例子:

 

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

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css"  />

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

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

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

   如果想要减少请求,可以使用内联的media query进行层叠:

@media screen and (max-width:240px){
    body{font-size:medium;}
} 

 

  在适应不同分辨率的设备时,应该保证内容优先,依照此原则来进行布局。

  流式布局

  使用media query可以针对不同分辨率的设备加载不同的css,但是仍然需要分很多情况,并且,在某些分辨率下表现可能不太理想。流式布局,即用相对单位,百分比进行布局。

  与绝对单位的换算方式,就是目标尺寸/上下文尺寸=值。

  一个简单的例子:

 

div.container { 

margin: 0 auto; 

width: 100%; 

} 

div.main { 

width: 62.5%; 

float: left; 

} 

div.aside { 

width: 31.25%; 

float: right; 

} 

 

  如果要设置最大宽度和最小宽度,就指定元素的max-width和min-width,IE7+都支持了。

  就是这些了,加油加油加油!

 

响应式设计的点点

标签:style   blog   ar   color   使用   sp   on   div   log   

原文地址:http://www.cnblogs.com/linda586586/p/4138285.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!