CSS3弹性布局、响应式布局、PS_col-4适配-优快云博客

本文链接：https://blog.youkuaiyun.com/Asmruan/article/details/121446862

1.响应式Web设计-Viewport
响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定
的版本。
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
(1)、什么是Viewport
viewport是用户网页的可视区域。
viewport翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"
窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破
坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的
不同部分。

(2)、设置Viewport
一个常用的针对移动网页优化过的页面的viewportmeta标签大致如下：
<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：用户是否可以手动缩放。

2.响应式Web设计-网格视图
(1)、什么是网格视图
很多网页都是基于网格设计的，这说明网页是按列来布局的。
使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。
响应式网格视图通常是12列，宽度为100%，在浏览器窗口大小调整时会自
动伸缩。
(2)、创建响应式网格视图
首先确保所有的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;
}
我们可以添加一些样式和颜色，让其更好看

3.响应式Web设计-媒体查询
(1)、定义和使用
使用@media查询，你可以针对不同的媒体类型定义不同的样式。
@media可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设
计响应式的页面，@media是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页
面。

(2)、CSS语法
动画是使元素从一种样式逐渐变化为另一种样式的效果。
@mediaonlymediatypeand|not(mediafeature){
CSS-Code;
}
你也可以针对不同的媒体使用不同stylesheets:
<linkrel="stylesheet"media="mediatypeand|not|only(mediafeature)"href="mystyles
heet.css">

(3)、媒体类型

print 用于打印机和打印预览

screen 用于电脑屏幕，平板电脑，智能手机等。

(4)、媒体功能
动画是使元素从一种样式逐渐变化为另一种样式的效果。

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

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

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

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

(5)、更多实例
使用@media查询来制作响应式设计
如果窗口小于500px,背景将变为浅蓝色：
@mediaonlyscreenand(max-width:500px){
body{
background-color:lightblue;
}
}

4.响应式Web设计-图片
(1)、使用width属性
如果width属性设置为100%，图片会根据上下范围实现响应式功能：
img{
width:100%;
height:auto;
}

(2)、使用max-width属性
如果max-width属性设置为100%,图片永远不会大于其原始大小：
img{
max-width:100%;
height:auto;
}

(3)、背景图片
背景图片可以响应调整大小或缩放。
以下是三个不同的方法：
1.如果background-size属性设置为"contain",背景图片将按比例自适应内容
区域。图片保持其比例不变：

2.如果background-size属性设置为"100%100%"，背景图片将延展覆盖整个
区域

3.如果background-size属性设置为"cover"，则会把背景图像扩展至足够大，
以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此背景图像的
某些部分无法显示在背景定位区域中。

以下大图片和小图片将显示在不同设备上：
/*Forwidthsmallerthan400px:*/
body{
background-image:url('img_smallflower.jpg');
}
/*Forwidth400pxandlarger:*/
@mediaonlyscreenand(min-width:400px){
body{
background-image:url('img_flowers.jpg');
}
}

5.Photoshop的简单使用
(1)、PS界面组成
菜单栏、选项栏、工具栏、浮动面板（拖拽名称，可单独操作面板）、绘图窗
口、窗口菜单可显示隐藏所有面板。工作区：（新建）。
(2)、图层操作
图层面板快捷键F7，其实图层就是一张张透明的纸，可以实现叠加问题。

图层选择：使用移动工具V
1、图层缩览图判断
2、按住CTRL,在目标图像上单击
3、将光标放置在目标图像上右键，选择图层名称
图层面板中加选图层：
1、按SHIFT，单击另一目标图层，中间所有图层被选中
2、按CTRL，单击另一目标图层，只选中目标图层

复制图层：选中目标图层后（移动工具状态下）
1、按ALT拖拽图像
2、CTRL+J（重合）

(3)、图层编组
选中目标图层，CTRL+G
取消编组：CTRL+SHIFT+G
双击图层名称可重新命名
双击组名称，可命名组
移动工具V选择组或图层时，需设置选项栏
(4)、图层上下位置移动
1、选中目标图层，在图层面拖拽
2、CTRL+]向上移动图层CTRL+[向下移动图层
3、CTRL+SHIFT+]图层置顶CTRL+SHIFT+[图层置底
移动选区或图像时：
移动过程中，没释放鼠标，按住SHIFT，可同一水平线、同一垂线、45度移动。
ps中的撤销操作是：ctrl+z撤销一步、ctrl+alt+z撤销多步。

(5)、Photoshop切图
PS切图可以分为手动利用切片切图以及利用PS的插件快速切图
切片工具
利用切片工具手动划出
图层菜单---新建基于图层的切片
利用标尺基于参考线的切片（选择切片工具）
先选个一个整个的切片，切片选择工具--属性面板中有“划分”--可以等分数
平分切图。
导出切片：文件--存储为web设备所用格式
6.基本的布局方法——Flex布局

(1)、基本概念

在不固定高度信息的例子中，我们只需要在容器中设置以下两个属性即可实现
内容不确定下的垂直居中。
.container{
display:flex;
flex-direction:column;
justify-content:center;
}

在开始介绍各个属性之前，我们需要先明确一个坐标轴。默认的情况下，水平
方向的是主轴（mainaxis），垂直方向的是交叉轴（crossaxis）。

'通过设置坐标轴，来设置项目排列方向。
.container{
flex-direction:row（默认值）|row-reverse|column|column-reverse
}
row（默认值）：主轴横向，方向为从左指向右。项目沿主轴排列，从左到右

排列。
row-reverse：row的反方向。主轴横向，方向为从右指向左。项目沿主轴排列，
从右到左排列。
column：主轴纵向，方向从上指向下。项目沿主轴排列，从上到下排列。
column-reverse：column的反方向。主轴纵向，方向从下指向上。项目沿主轴
排列，从下到上排列。

flex-wrap属性
设置是否允许项目多行排列，以及多行排列时换行的方向。
.container{
flex-wrap:nowrap（默认值）|wrap|wrap-reverse
}
nowrap（默认值）：不换行。如果单行内容过多，则溢出容器。
wrap：容器单行容不下所有项目时，换行排列。
wrap-reverse：容器单行容不下所有项目时，换行排列。换行方向为wrap时的反方
向。
图4-8flex-wrap
justify-content属性
设置项目在主轴方向上对齐方式，以及分配项目之间及其周围多余的空间。
.container{

justify-content:flex-start（默认值）|flex-end|center|space-between|space-around|
space-evenly
}

flex-start（默认值）：项目对齐主轴起点，项目间不留空隙。
center：项目在主轴上居中排列，项目间不留空隙。主轴上第一个项目离主轴
起点距离等于最后一个项目离主轴终点距离。
flex-end：项目对齐主轴终点，项目间不留空隙。
space-between：项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终
点距离为0。
space-around：与space-between相似。不同点为，第一个项目离主轴起点和最后一
个项目离主轴终点距离为中间项目间间距的一半。
space-evenly：项目间间距、第一个项目离主轴起点和最后一个项目离主轴终点
距离等于项目间间距。

align-items属性
设置项目在行中的对齐方式。
.container{
align-items:stretch（默认值）|flex-start|center|flex-end|baseline
}
stretch（默认值）：项目拉伸至填满行高。
flex-start：项目顶部与行起点对齐。
center：项目在行中居中对齐。
flex-end：项目底部与行终点对齐。
baseline：项目的第一行文字的基线对齐。。

align-content属性
多行排列时，设置行在交叉轴方向上的对齐方式，以及分配行之间及其周围多
余的空间。
.container{
align-content:stretch（默认值）|flex-start|center|flex-end|space-between
|space-around|space-evenly
}
stretch（默认值）：当未设置项目尺寸，将各行中的项目拉伸至填满交叉轴。
当设置了项目尺寸，项目尺寸不变，项目行拉伸至填满交叉轴。
flex-start：首行在交叉轴起点开始排列，行间不留间距。
center：行在交叉轴中点排列，行间不留间距，首行离交叉轴起点和尾行离交
叉轴终点距离相等。
flex-end：尾行在交叉轴终点开始排列，行间不留间距。
space-between：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为0。
space-around：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为行
与行间间距的一半。
space-evenly：行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等。

(3)、项目属性
设置项目，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。
order属性
设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前。属性值为整数，
默认是0。
.item{
order:0（默认值）|<integer>
}

flex-shrink属性
当项目在主轴方向上溢出时，通过设置项目收缩因子来压缩项目适应容器。属
性值为项目的收缩因子，属性值取非负数。

需要注意一点，当项目的压缩因子相加小于1时，参与计算的溢出空间不等于
完整的溢出空间。在上面例子的基础上，我们改变各个项目的flex-shrink。

flex-grow属性
当项目在主轴方向上还有剩余空间时，通过设置项目扩张因子进行剩余空间的
分配。属性值为项目的扩张因子，属性值取非负数。
.item{
flex-grow:0（默认值）|<number>

}

flex-basis属性
当容器设置flex-direction为row或row-reverse时，flex-basis和width同时存在，
flex-basis优先级高于width，也就是此时flex-basis代替项目的width属性。
当容器设置flex-direction为column或column-reverse时，flex-basis和height
同时存在，flex-basis优先级高于height，也就是此时flex-basis代替项目的height
属性。
需要注意的是，当flex-basis和width（或height），其中一个属性值为auto时，
非auto的优先级更高。