首页 > 代码库 > div css 自适应
div css 自适应
怎样实现响应式布局？
对于这个问题，我们可以通过CSS3中的Media Query来实现，即媒介查询。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达"大于或等于"和"小与或等于"。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。
首先我们要允许网页宽度自动调整
在网页代码的头部，加入一行viewport元标签：
<meta name="viewport" content="width=device-width, initial-scale=1" />
下面通过Media Query我们可以得到不同设备屏幕的宽和高，从而我们就可以分别处理了。根据不同的设备屏幕宽度，设置不同的CSS。那么这里有两种方法：
1、外联样式表
在这里我们可以根据不同的设备载入不同的CSS样式表
<linkrel="stylesheet"type="text/css"media="screen and (min-width:960px)"href="http://www.mamicode.com/css/gt-960px.css">
当页面宽度大于等于960px时，载入样式表gt-960px.css
<linkrel="stylesheet"type="text/css"media="screen and (min-width:600px) and (max-width:960px)"href="css/gt-600px-lt-960px.css">
当页面宽度大于等于600px且小于等于960px时，载入样式表gt-600px-lt-960px.css
<linkrel="stylesheet"type="text/css"media="screen and (max-width:600px)"href="css/lt-600px.css">
当页面宽度小于等于600px时，载入样式表lt-600px.css
2、样式表中内嵌法
当页面宽度大于等于960px时
@media screenand (min-width:960px){ .header, .container, .footer{ width:960px; } .sidebarLeft, .main, .sidebarRight{ float:left; height:400px; } ...}
当页面宽度大于等于600px且小于等于960px时
@media screenand (min-width:600px) and (max-width:960px){ .header, .container, .footer{ width:600px; } .sidebarLeft, .main{ float:left; height:400px; } ...}
当页面宽度小于等于600px时
@media screenand (max-width:600px){ .header, .container, .footer{ width:400px; } .sidebarLeft, .sidebarRight{ width:400px; height:100px; } ...}
弹性图片
我们需要为图片设置max-width: 100%和height: auto，来实现其弹性化。
img { max-width: 100%; height: auto; width: auto9; /* ie8 */}
div css 自适应
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。