响应式布局这件小事有哪些优点和缺点该怎么设计

Posted 2020-10-25 Carina

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

　　响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

一、响应式布局有哪些优点和缺点

 

1. 1

   优点：

   　　面对不同分辨率设备灵活性强

   　　能够快捷解决多设备显示适应问题

2. 2

   缺点：

   　　兼容各种设备工作量大，效率低下

   　　代码累赘，会出现隐藏无用的元素，加载时间加长

   　　其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果

   　　一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

   END

二、响应式布局该怎么设计?

 

1.  

   通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受 min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的 @media和@import规则上，也可以被用在html和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设 备，将会运用更加的广泛。

2.  

   　设备的宽和高device-width，device-heigth显示屏幕/触觉设备。

   　　渲染窗口的宽和高width，heigth显示屏幕/触觉设备。

   　　设备的手持方向，横向还是竖向orientation(portrait|lanscape)和打印机等。

   　　画面比例aspect-ratio点阵打印机等。

   　　设备比例device-aspect-ratio-点阵打印机等。

   　　对象颜色或颜色列表color，color-index显示屏幕。

   　　设备的分辨率resolution。

3. 3

   @media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

   　　示例一：在link中使用@media：

   <link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/>

   　　上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。