首页 > 代码库 > 响应式布局

响应式布局

2024-08-11 09:27:27   219人阅读

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
 
css3媒体查询语法：
/*@media screen and (min-width:1440px) and (max-width:1600px){}*/
@media screen and (min-width:1440px){ /*大于等于1440*/
    /*这里是特定的样式表*/
    body,input,textarea,select,small,a{font-size:14px;}
}
@media screen and (max-width:1024px){    
      /**/
}
@media screen and (max-width:768px){
      /*不大于768px的设备尺寸中 响应式布局的特定样式*/
}
@media screen and (max-width:360px){
    
}
@media screen and (max-width:320px){
    
}
看了这几个 写法是不是感觉响应式布局不过如此，哈哈，其实就是这么简单。

别急，在仔细想想好像还少点啥，比如在移动端、手机上打开这个网页的话，如果做响应式布局，还要在head区域加上如下代码：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />    
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="format-detection" content="telephone=yes"/>
<meta name="msapplication-tap-highlight" content="no" />
如果不是很明白，就直接粘贴过去使用就可以了。
width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no 大概意思是，网页宽度采用设备宽度，缩放比例为1，不允许用户缩放操作，
以上的头部声明是手机端页面的标配。

响应式布局


联系
我们