CSS3–2.css3 响应式布局
浏览数：21 /
时间：2015年06月09日
1.响应式布局
响应式布局是现在很流行的一个设计理念，随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果，设计师提出了响应式布局的设计方案。所谓的响应式布局，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。也就说一个页面可以在多个终端呈现出你想要的效果，能够兼容各个终端。
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
根据不同的显示器调整设计最适合用户浏览习惯的页面
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果
因为要适应不同的设备，页面的结构可能会有所不同，会导致页面的
辨识度不强 1.media query: 2.语法结构及用法:
通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件
@media 设备名 only (选取条件) not (选取条件) and(设备选取条件)，设备二 {sRules}
(1)在link中使用@media:
<link rel="stylesheet" href="1.css" media="screen and (min-width:1000px)">
(2)在样式表中内嵌@media：
@media screen and (min-width: 600px) {
.one{
border:1px solid red;
height:100px;
width:100px;
}
}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
