移动web之响应式布局

Posted 2020-09-30 mfmdaoyou

1.响应式布局的概念


响应式布局是Ethan Marcotte在2010年5月份提出的一个概念。简而言之。就是一个站点可以兼容多个终端——而不是为每一个终端做一个特定的版本号。

这个概念是为解决移动互联网浏览而诞生的。

响应式布局能够为不同终端的用户提供更加舒适的界面和更好的用户体验。并且随着眼下大屏幕移动设备的普及。用大势所趋来形容也不为过。

2.Media Rule


1)定义和用途
Media Rule是用来定义不同的媒体类型／不同设备的样式规则。

在css2中它被称为Media types,在css3中被称为Media Querys.
用途：
·浏览器的高度和宽度
·设备的高度和宽度
·设备的方向（横向／纵向）
·dpi
·and more

2)css语法
在样式表中嵌入@media
@media not|only mediatype and (media feature) { 
    CSS-Code;
}

/* 当浏览器的可视区域小于980px */
@media　[only] screen and (max-width: 980px) {
    #wrap {width: 90%; margin:0 auto;}
    #content {width: 60%;padding: 5%;}
    #sidebar {width: 30%;}
    #footer {padding: 8% 5%;margin-bottom: 10px;}
}
/* 当浏览器的可视区域小于650px */
@media screen and (max-width: 650px) {
    #header {height: auto;}
    #searchform {position: absolute;top: 5px;right: 0;}
    #content {width: auto; float: none; margin: 20px 0;}
    #sidebar {width: 100%; float: none; margin: 0;}
}
在link中使用@media
<link rel="stylesheet" media=" mediatype and|not|only ( media feature )" href=" mystylesheet.css ">

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

3)viewport
须要在页面的head中加上viewport,这个属性是在移动设备上设置原始大小显示和是否缩放的声明。
<meta name="viewport" content="width=device-width; initial-scale=1.0;user-scalable=yes">
demo:
測试站点：http://responsivator.queenslandwebplan.com/
demo:http://2012.dconstruct.org/