一、自适应网页设计基础
1. 允许网页宽度自动调整
首先，在网页头部加入viewport元标签
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2. 不使用绝对宽度
不能指定width: XXpx;，只能指定width: XX%;或者width:auto;。
3. 使用相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
4. 采用流式布局
流式布局（float）避免水平滚动条的出现。
5. 选择加载css
"自适应网页设计"的核心，就是CSS3引入的Media Query模块。
自动探测屏幕宽度，然后加载相应的CSS文件。
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
6. css的@media规则
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
7. 图片的自适应
通常只需要一句话即可：
img { max-width: 100%;}
对于不支持max-width的老版本IE：
img { width: 100%; }
windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
img { -ms-interpolation-mode: bicubic; }
二、Bootstrap中的自适应设计
1. Bootstrap基本模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/Bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/Bootstrap.min.js"></script>
</body>
</html>
将下面的<meta>标签加入到页面中，可以让部分国产浏览器默认采用高速模式渲染页面：
<meta name="renderer" content="webkit">
目前只有360浏览器支持此<meta>标签。
2. Normalize.css
3. 栅格系统（栅栏布局）
（1）媒体查询
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
（2）栅格参数
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列 | ||
| .container 最大宽度 | None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
（3）基本结构及具体样式定义
基本结构：
<div class="container">
<div class="row">
<div class="col-xx-4"></div>
<div class="col-xx-4"></div>
<div class="col-xx-4"></div>
</div>
</div>
基本样式：
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-xx-i {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
float: left;
width: xx%；
}
列偏移：
.col-xs-offset-1 {
margin-left: 8.33333333%;
}
列排序：
.col-xs-push-1 {
left: 8.33333333%;
}
.col-xs-pull-1 {
right: 8.33333333%;
}
三、网页自适应设计常用结构
1. 多列等宽布局
2. 一侧固定宽度、一侧自适应两栏布局
3. 两栏等高布局
参考资料
扫一扫
629
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
