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