my blog my blog

Tag: 响应式布局
建站心得 网络杂记
流式网格布局宽度控制的处理到响应式布局

 

最近写了个小企业站，使用的是BootStrap的fluid layout流式布局，自己的笔记本分辨率是1333×768的，所以页面设计在本机测试没什么问题，但是交付的时候发现人家说在小分辨率上太难看了，然后就得解决，其实说来也简单，就直接用min-width来作控制即可。最简单的方案就是在css中这样子设置

     
  1. html,body{ 
    2.  
  2.     min-width:1333px; 
    3.  
  3. } 
    4.

这样子处理完成后，可以保证页面的最小宽度为1333px，理论上页面就不会走形了，而这个min-width是css2的，所以兼容性肯定也可以保证。但是，从这里，可以引申联想到一些设计时候需要注意的问题。

1.低分辨率的设备访问时候，是否可以根据分辨率自适而不是单纯的用最小宽度来控制。

2.对于移动设备的访问时候，是否可以根据不同的分辨率有不同的排版甚至部分内容的显示隐藏控制。

好吧，响应式，对响应式设计。

默认的BootStrap是没有加入响应式的css的，需要手动引用，官方doc中是这样子描述的

     
  1. Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. 
    2.  
  2. If you've compiled Bootstrap from the Customize page, you need only include the meta tag. 
    3.  
  3.  
    4.  
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    5.  
  5.     <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> 
    6.  
  6.  
    7.  
  7. Heads up! Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. 
    8.  
  8. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed. 
    9.

就是说，需要手动引用两行代码到head标签中。第二行引用就不说了，是引用的响应式的css文件，第一行引用需要说下，这是对viewport的说明。宽度与设备的宽度相适应，缩放默认比例为1。当然content还可以有其它内容

     
  1. width：viewport 的宽度，可以指定为一个像素值，如：600，或者为特殊的值，如：device-width （设备的宽度）。 
    2.  
  2. height：viewport的高度。 
    3.  
  3. initial-scale：初始缩放比例，即当浏览器第一次加载页面时的缩放比例。 
    4.  
  4. maximum-scale：允许浏览者缩放到的最大比例，一般设为1.0。 
    5.  
  5. minimum-scale：允许浏览者缩放到的最小比例，一般设为1.0。 
    6.  
  6. user-scalable：浏览者是否可以手动缩放，yes或no。  
    7.

这样子就引入了BootStrap的响应式css了。到了这里还没有完，我们应该去关注下这个响应式的css是怎么具体实现的响应式功能。打开css文件后你会发现最大的不同是该css文件中引用了很多@media，对，这就是Media Queries啦，Media Queries也是css3的一个重要功能，它提供了对不同的设备分辨率进行适配的功能。

Media Queries的格式如下：

     
  1. @media 设备类型 and (设备特性) { 样式代码 } 
    2.

其中的设备类型有：

     
  1. 1、all：所有设备 
    2.  
  2. 2、screen ：电脑显示器 
    3.  
  3. 3、print：打印用纸或打印预览视图 
    4.  
  4. 4、handheld：便携设备 
    5.  
  5. 5、tv：电视机类型的设备 
    6.  
  6. 6、speech：语意和音频盒成器 
    7.  
  7. 7、braille：盲人用点字法触觉回馈设备 
    8.  
  8. 8、embossed：盲文打印机 
    9.  
  9. 9、projection：各种投影设备 
    10.  
  10. 10、tty：使用固定密度字母栅格的媒介，比如电传打字机和终端 
    11.

然后就是设备特性了，这个设备特性跟viewport很相似

     
  1. 1、width：浏览器宽度 
    2.  
  2. 2、height：浏览器高度 
    3.  
  3. 3、device-width：设备屏幕分辨率的宽度值 
    4.  
  4. 4、device-height：设备屏幕分辨率的高度值 
    5.  
  5. 5、orientation：浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape。 
    6.  
  6. 6、aspect-ratio：比例值，浏览器的纵横比. 
    7.  
  7. 7、device-aspect-ratio：比例值，屏幕的纵横比. 
    8.  
  8. 8、color：设备使用多少位的颜色值，如果不是彩色设备，值为0 
    9.  
  9. 9、color-index：色彩表的色彩数 
    10.  
  10. 10、monochrome：单色帧缓冲器每个像素的字节 
    11.  
  11. 11、resolution：分辨率值，设备分辨率值 
    12.  
  12. 12、scan：电视机类型设备扫描方式，progressive或interlace 
    13.  
  13. 13、grid：只能指定两个值0或1 
    14.

其中呢，设备类型是可以忽略掉不必须写的，默认应该是all。像BootStrap的响应式css中就是用如下的格式来进行css定义的

 

     
  1. /* Large desktop */ 
    2.  
  2. @media (min-width: 1200px) { ... } 
    3.  
  3.   
    4.  
  4. /* Portrait tablet to landscape and desktop */ 
    5.  
  5. @media (min-width: 768px) and (max-width: 979px) { ... } 
    6.  
  6.   
    7.  
  7. /* Landscape phone to portrait tablet */ 
    8.  
  8. @media (max-width: 767px) { ... } 
    9.  
  9.   
    10.  
  10. /* Landscape phones and down */ 
    11.  
  11. @media (max-width: 480px) { ... } 
    12.

如果需要对范围进行一个界定的话可以使用and关键词。这样子就可以完成对不同的分辨率的设备进行单独的布局设置调整了。在BootStrap中还有一点是比较不错的，它支持.visible-phone、.visible-tablet、.visible-desktop、.hidden-phone、.hidden-tablet、.hidden-desktop这几个属性来对不同的设备进行定义是否显示某些模块。

最近要是有空就写个小响应式的demo玩儿玩儿~~~酱说我的文章分类有点儿乱，其实，我也是这么觉得的，很多事儿都该条理下了~

奶牛 | 2013年08月17日