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

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的优先级更高。

CSS3弹性布局、响应式布局、PS相关推荐

php响应式布局,响应式布局之弹性布局的介绍
响应式布局的实现是前端工程中一个非常大的跨越,它非常灵活的可塑造性使得同一个网站能在不同的终端设备上展现出不同的活力.就今天这个机会,我想与大家分享并探讨一些常用来实现响应式布局方法中的弹性布局. 弹 ...
Css3中的响应式布局的应用
Media Queries直译过来就是"媒体查询",在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css& ...
css 里面写响应式布局,CSS3怎么做出响应式布局
今天给大家带来一个用CSS3做出来的响应式布局的案列,需要的朋友可以拿去借鉴使用,响应式是CSS3的一个特色,我们熟练掌握后手机端和PC端都可以熟练的使用. *{padding: 0;margin: ...
html5+css3+jquery完成响应式布局
文章出处:https://www.cnblogs.com/jqstudy/p/6213358.html 响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的 ...
到底什么是响应式布局,响应式布局如何去写
即第一个问题--如何解决浏览器的兼容性被我们处理了之后,我们开始学习,如何解决响应式布局,到底什么是响应式布局其实响应式布局.说的通俗点,就是浏览你写的网站或者说页面的容器不同,大小不同,有人用手机 ...
[响应式布局]响应式布局技巧
##一理解几种布局的概念 ###1.静态布局(Static Layout) 即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分: 意思就是不管浏 ...
css-适配布局类型-流式布局-响应式布局
制作手机界面时,一般按照2倍的大小去做. 如果设备的宽度大于显示的宽度,可以做一个适配流体布局来个例子,体验代码 PC端可适配移动端电脑,与移动端都可正常显示假设,给每一个a标签加上了边框 ...
微金所页面制作（Bootstrap 响应式开发栅格布局响应式布局）
该页面适用于 PC端和移动端,在响应式开发的媒体查询下能够适配所有屏幕. 一.页面效果二.结构样式说明 (需引入bootstrap 相关样式文件) 结构分为八块: 头部块:.wjs_header ...
VUE iView之栅格布局响应式布局
栅格布局: 我们采用了24栅格系统,将区域进行24等分,这样可以轻松应对大部分布局问题.使用栅格系统进行网页布局,可以使页面排版美观.舒适. 我们定义了两个概念,行row和列col,具体使用方法如下: ...
html响应式弹性布局,CSS3响应式布局之弹性盒子
CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...

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

CSS3弹性布局、响应式布局、PS相关推荐

最新文章

热门文章