响应式布局学习
2017-02-16 本文已影响24人
我是渐渐呀
一、响应式网页
-
一个页面，可以根据浏览设备的不同，以及特性的不同，而自动改变布局、大小等
-
响应式网页的三个特征
1）流式网格布局(fluid)
2）可伸缩的图片和字体
3）CSS3 Media Query - 根据客户端浏览设备的特性，有选择的执行部分css
-
优缺点
优点：可以自动适配PC/PAD/PHONE浏览器屏幕
缺点：代码变复杂，需要考虑更多兼容性，并不适合内容非常多的网页
二、如何测试响应式网页
1、真实物理设备
优点：测试结构真实可靠
不足：测试任务量太大
2、使用第三方软件
优点：无需添置真实设备
不足：软件测试效率低，部分功能无法测试，测试结果有待进一步验证
3、使用浏览器模拟器测试
优点：测试功能强大，简单易用，
不足：测试结果有待进一步验证
三、响应式布局必须清楚的两个概念
1. viewport - 视口
1) 2010年之前，html网页基本都是为pc设计的，宽度比较大,在手机上的显示内容会挤压到一块，后来iOSiOS引入了viewport(视口)的概念，来优化手机上观看网站的体验
2) iOS引入了viewport(视口)的概念：用于显示网页内容的一个逻辑概念，其高度和宽度都可以任意制定，网页不是显示在物理窗口，而是显示在视口中-就可以实现大网页不经缩放，直接显示手机中，但需要用户来回滑动
3) viewport的用法
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
viewport 可以指定如下属性：
width: 视口的宽度，可以取值为数值，或device-width
height：视口的高度，一般不指定
initial-scale：初始时的缩放倍率
minimum-scale : 允许的最小缩放倍率
maximum-scale : 允许的最大缩放倍率
user-scalable : 是否允许用户手动缩放，可取值1/0/yes/no
2. CSS3 media query
1) 作用：根据客户端浏览设备的特性，有选择的执行部分css
2) media: 指浏览网页的设备，如screen
3) Query: 查询出当前浏览设备的特性，如类型、宽度、高度、分辨率、色彩、方向(landscape/portrait)
4) css3MediaQuery有两种用法
根据媒体的特性，加载不同的外部css
<link media="screen and (min-width:990px) and (max-width:1000px)" rel="stylesheet" type="text/css" href="css/pc.css"/>
不足：客户端会不管媒体特性，请求所有的css文件
根据媒体的特性，执行某段css中的部分内容
@media screen and (min-width: 990px) {}
https://wangliguang.github.io/categories/
四、如何编写响应式网页
1. 在head标签中，声明viewport元标签, 使网页的视口和浏览器的宽高保持一致
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
2. 根据浏览器的不同，加载不同的css文件
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px)" href="smallScreen.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="tinyScreen.css" />
3. 同一个css文件中，也根据不同的屏幕分辨率，选择应用不同的css规则
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
4. 注意：
1) 所有元素的宽不能制定固定值，必须使用相对的宽度值
width:"60%" 或者 width:"auto"
2) 字体不能使用绝对大小(px),必须使用相对大小(em)
3) 布局用的各个区块的位置都是浮动的，不是固定不变的
4) 除了布局和文本，还必须实现图片的自动缩放,或者根据客户端屏幕的不同，加载不同尺寸的图片
img {
max-width:100%;
}
五、 Bootstrap
www.bootcss.com
1. 是一个html/css/js框架，适用于移动设备优先的响应式网页
V2: 面向PC进行了样式设定，同时兼顾pad和phone
V3: 面向Phone进行样式设定，同时兼顾了PC
主要涉及：
HTML: 为H5扩展了一些自定义属性
CSS: CSS Reset + 几千个class
JS: 基于JQ提供了十几个插件函数
2. bootstrap分为五部分
1. 起步startup
创建一个bootstrap页面，查看对下述标签进行了哪些样式重置
html body h1-h6 a img table ul
2. 全局css样式 global css
1) 按钮
bootstrap中常用的五种颜色
红色->危险
绿色->成功
黄色->警告
浅蓝色->信息
深蓝色->基础的
bootstrap中常用的四个大小
btn-lg -》大
btn-md -》中
btn-sm -》小
btn-xs -》最小
块级按钮
btn-block
调整按钮的位置
pull-right ->右浮动
pull-left ->左浮动
2) 图片
img-rounded 圆角
img-circle 圆形
img-thumbnail 缩略图
img-responsive 图片支持响应式布局
3) 排版和代码，仅作了解
文本颜色
text-danger
text-success
text-warning
text-info
text-primary
背景颜色
bg-danger
bg-success
bg-warning
bg-info
bg-primary
文本对齐方式
text-left
text-right
text-center
text-justify
文本对齐方式
text-lowercase
text-uppercase
text-capitalize
4) 列表
list-unstyle 去掉列表项样式
list-inline 将所有元素放在同一行
5) 表格
bootlint是一个js，由bootstrap官方提供，用于检测使用bootstrap的页面中场景的html错误，class使用方面的错误-默认请求下浏览器检查不出来的
table
table-bordered 带边框的
table-responsive 响应式表格，注意，使用在table的父元素上，而不是table上
table-striped 隔行变色的表格
table-hover 带悬停效果的表格
6) 栅格布局系统
7) 表单
3. 组件commponent
4. 插件plugin
5. 定制customize
总结：
1. 响应式布局就是bootstrap
错的，使用bootstrap是为了更加简单的做响应式页面
2. viewport,是一个逻辑概念，可以设置宽高，用于显示页面
3. css Media query 根据不同的情况使用不同的css样式
4. 自己做响应式页面
1) 设置viewport宽=device-width
2) 使用css3 media query加载样式
3) 注意点
浮动 字体设置相对的 width相对的 img-》max-width:100%
5. bootstrap做响应式
1） ie兼容
2）设置viewport
3） 导入关键css文件
css reset + 上千个类
4）使用css hack 让低版本ie兼容html5新标签和cssmediaquery
5） 给元素设置类
6.）导入bootstrap的关键js文件
