CSS3弹性布局、响应式布局、PS

响应式Web设计-Viewport

响应式布局是一个网站能够兼容多个终端 而不是为每个终端做一个特定
的版本。
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

什么是Viewport

viewport是用户网页的可视区域。
viewport翻译为中文可以叫做"视区"。

设置Viewport

<metaname="viewport"content="width=device-width,initial-scale=1.0">

width：控制viewport的大小，可以指定的一个值，如600，或者特殊的值，
如device-width为设备的宽度（单位为缩放为100%时的CSS的像素）。
height：和width相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

响应式Web设计-网格视图

响应式网格视图通常是12列，宽度为100%，在浏览器窗口大小调整时会自
动伸缩。

创建响应式网格视图
首先确保所有的HTML元素都有box-sizing属性且设置为border-box。
确保边距和边框包含在元素的宽度和高度间。
添加如下代码：
*{box-sizing:border-box;}

以下实例演示了简单的响应式网页，包含两列：

.menu{
width:25%;
float:left;
}
.main{
width:75%;
float:left;
}

12列的网格系统可以更好的控制响应式网页。
首先我们可以计算每列的百分比:100%/12列=8.33%。
在每列中指定class，class="col-"用于定义每列有几个跨度：

.col-1{width:8.33%;}
.col-2{width:16.66%;}
.col-3{width:25%;}
.col-4{width:33.33%;}
.col-5{width:41.66%;}
.col-6{width:50%;}
.col-7{width:58.33%;}
.col-8{width:66.66%;}
.col-9{width:75%;}
.col-10{width:83.33%;}
.col-11{width:91.66%;}
.col-12{width:100%;}

所有的列向左浮动，间距(padding)为15px：
[class*="col-"]{
float:left;
padding:15px;
border:1pxsolidred;
}

每一行使用<div>包裹。所有列数加起来应为12：
<divclass="row">
<divclass="col-3">...</div>
<divclass="col-9">...</div>
</div>
列中行为左浮动，并添加清除浮动：
.row:after{
content:"";
clear:both;
display:block;
}

响应式Web设计-媒体查询

定义和使用

使用@media查询，你可以针对不同的媒体类型定义不同的样式。
@media可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设
计响应式的页面，@media是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页
面。
(2)、CSS语法
动画是使元素从一种样式逐渐变化为另一种样式的效果。
@mediaonlymediatypeand|not(mediafeature){
CSS-Code;
}
你也可以针对不同的媒体使用不同stylesheets:
<linkrel="stylesheet"media="mediatypeand|not|only(mediafeature)"href="mystyles
heet.css">

媒体类型

 媒体功能

device-height定义输出设备的屏幕可见高度。

device-width定义输出设备的屏幕可见宽度。

max-width定义输出设备中的页面最大可见区域宽度

min-width定义输出设备中的页面最小可见区域宽度。

orientation定义输出设备中的页面可见区域高度是否大于或等于宽度。

使用@media查询来制作响应式设计

@mediaonlyscreenand(max-width:500px){
body{
background-color:lightblue;
}
}

基本的布局方法——Flex布局

找父元素声明弹性盒模型

display:flex;   //声明弹性盒模型

子元素的排列方式

justify-conten:space-around;   //左右距离是中间的一半

justify-conten:space-between;   //两边靠边 中间等间分布

justify-conten:space-evenly;   //等间距分布

justify-conten:flex-start;   //项目对齐起点 不留空隙

justify-conten:flex-end;   //靠右

justify-conten:flex-center;   //居中

设置坐标轴的方向

flex-direction:row/colum  //行或列

flex-direction:row-reverse/colum-reverse  //行翻转或列翻转

换行 flex-wrap：wrap

设置项目的对齐方式行中

align-items:flex-start  // 顶部

align-items:flex-end  // 底部

align-items:flex-center  // 居中

align-items:flex-baseline  // 文字的基线