响应式 Web 设计 - Viewport

响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

(1)、什么是 Viewport

viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

、设置 Viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

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: 1px solid red;
}

每一行使用 <div> 包裹。所有列数加起来应为 12：

列中行为左浮动，并添加清除浮动：

.row:after {
    content: "";
    clear: both;
    display: block;
}

我们可以添加一些样式和颜色，让其更好看：

响应式 Web 设计 - 媒体查询

、定义和使用

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

、CSS语法

动画是使元素从一种样式逐渐变化为另一种样式的效果。

@media only mediatype and|not (media feature) {
CSS-Code;
}

你也可以针对不同的媒体使用不同 stylesheets :

、媒体类型

值	描述
all	用于所有设备
aural	已废弃。用于语音和声音合成器
braille	已废弃。应用于盲文触摸式反馈设备
embossed	已废弃。用于打印的盲人印刷设备
handheld	已废弃。用于掌上设备或更小的装置，如PDA和小型电话
print	用于打印机和打印预览
projection	已废弃。用于投影设备
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备
tty	已废弃。用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv	已废弃。用于电视和网络电视

、媒体功能

动画是使元素从一种样式逐渐变化为另一种样式的效果。

值	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
grid	用来查询输出设备是否使用栅格或点阵。
height	定义输出设备中的页面可见区域高度。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color	定义输出设备每一组彩色原件的最大个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
max-width	定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color	定义输出设备每一组彩色原件的最小个数。
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
min-height	定义输出设备中的页面最小可见区域高度。
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率。
min-width	定义输出设备中的页面最小可见区域宽度。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序。
width	定义输出设备中的页面可见区域宽度。

、更多实例

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

如果窗口小于 500px, 背景将变为浅蓝色：

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

移动端优先意味着在设计桌面和其他设备时优先考虑移动端的设计。

这就意味着我们必须对 CSS 做一些改变。

我们在屏幕小于 768px 进行样式修改，同样在屏幕宽度大于 768px 时也需要修改样式。以下是移动端优先实例：

/* 为移动端设计: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .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%;}
}

桌面设备

平板设备

手机设备

结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

语法：

orientation：portrait | landscape

portrait：指定输出设备中的页面可见区域高度大于或等于宽度

landscape：除portrait值情况外，都是landscape

如果是横屏背景将是浅蓝色：

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

如果是横屏背景将是浅蓝色：

当浏览器的宽度在 520 到 699px, 改变背景色

@media screen and (max-width: 699px) and (min-width: 520px) {
background: red;
}

响应式 Web 设计 - 图片

、使用 width 属性

如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能：

img {
width: 100%;
height: auto;
}

注意在以上实例中，图片会比它的原始图片大。我们可以使用 max-width 属性很好的解决这个问题。

(2)、使用 max-width 属性

如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小：

img {
max-width: 100%;
height: auto;
}

(3)、背景图片

背景图片可以响应调整大小或缩放。

以下是三个不同的方法：

1. 如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域。图片保持其比例不变：

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid red;
}

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

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}

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

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: cover;
    border: 1px solid red;
}

(4)、不同设备显示不同图片

大尺寸图片可以显示在大屏幕上，但在小屏幕上确不能很好显示。我们没有必要在小屏幕上去加载大图片，这样很影响加载速度。所以我们可以使用媒体查询，根据不同的设备显示不同的图片。

以下大图片和小图片将显示在不同设备上：

/* For width smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
}

5.Photoshop的简单使用

(1)、PS界面组成

菜单栏、选项栏、工具栏、浮动面板（拖拽名称，可单独操作面板）、绘图窗口、窗口菜单可显示隐藏所有面板。工作区：（新建）。

(2)、图层操作

图层面板快捷键F7，其实图层就是一张张透明的纸，可以实现叠加问题。

图层选择：使用移动工具V

1、图层缩览图判断

2、按住CTRL,在目标图像上单击

3、将光标放置在目标图像上右键，选择图层名称

复制图层：选中目标图层后（移动工具状态下）

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布局

如果之前你接触过网页开发中的flexbox布局，基本上你可以略过这节。但有一点需要注意的是，你的小程序要求兼容到iOS8以下版本，需要开启样式自动补全。开启样式自动补全，在“设置”—“项目设置”—勾选“上传代码时样

图4-2 开发者工具开启样式自动补全

在小程序开发中，我们需要考虑各种尺寸终端设备上的适配。在传统网页开发，我们用的是盒模型，通过display:inline | block | inline-block、 position、float来实现布局，缺乏灵活性且有些适配效果难以实现。比如像下面这种常见的信息列表，要求内容高度不确定下保持垂直居中：

图4-3 常见的信息列表排版方式

这种情况下，我们更建议用flex布局。

在开始介绍flex之前，为了表述方便，我们约定以下术语：采用flex布局的元素，简称为“容器”，在代码示例中以container表示容器的类名。容器内的元素简称为“项目”，在代码示例中以item表示项目的类名。

图4-4 container容器和item项目

(1)、基本概念

flex的概念最早是在2009年被提出，目的是提供一种更灵活的布局模型，使容器能通过改变里面项目的高宽、顺序，来对可用空间实现最佳的填充，方便适配不同大小的内容区域。

在不固定高度信息的例子中，我们只需要在容器中设置以下两个属性即可实现内容不确定下的垂直居中。

.container{

display: flex;

flex-direction: column;

justify-content: center;

}

flex不单是一个属性，它包含了一套新的属性集。属性集包括用于设置容器，和用于设置项目两部分。

设置容器的属性有：

display:flex;

flex-direction:row（默认值） | row-reverse | column |column-reverse

flex-wrap:nowrap（默认值） | wrap | wrap-reverse

align-items:stretch（默认值） | center | flex-end | baseline | flex-start

设置项目的属性有：

order:0（默认值） | <integer>

flex-shrink:1（默认值） | <number>

flex-grow:0（默认值） | <number>

flex-basis:auto（默认值） | <length>

flex:none | auto | @flex-grow @flex-shrink @flex-basis

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

图4-5 默认情况下的主轴与交叉轴

项目是在主轴上排列，排满后在交叉轴方向换行。需要注意的是，交叉轴垂直于主轴，它的方向取决于主轴方向。

图4-6 项目是在主轴上排列，排满后在交叉轴方向换行

接下来的例子如无特殊声明，我们都以默认情况下的坐标轴为例。

(2)、容器属性

设置容器，用于统一管理容器内项目布局，也就是管理项目的排列方式和对齐方式。

flex-direction 属性

通过设置坐标轴，来设置项目排列方向。

.container{

flex-direction: row（默认值） | row-reverse | column | column-reverse

}

row（默认值）：主轴横向，方向为从左指向右。项目沿主轴排列，从左到右排列。

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

column：主轴纵向，方向从上指向下。项目沿主轴排列，从上到下排列。

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

图4-7 flex-direction

flex-wrap 属性

设置是否允许项目多行排列，以及多行排列时换行的方向。

.container{

flex-wrap: nowrap（默认值） | wrap | wrap-reverse

}

nowrap（默认值）：不换行。如果单行内容过多，则溢出容器。
wrap：容器单行容不下所有项目时，换行排列。
wrap-reverse：容器单行容不下所有项目时，换行排列。换行方向为wrap时的反方向。

图4-8 flex-wrap

justify-content 属性

设置项目在主轴方向上对齐方式，以及分配项目之间及其周围多余的空间。

.container{

}

flex-start（默认值）：项目对齐主轴起点，项目间不留空隙。

center：项目在主轴上居中排列，项目间不留空隙。主轴上第一个项目离主轴起点距离等于最后一个项目离主轴终点距离。

flex-end：项目对齐主轴终点，项目间不留空隙。
space-between：项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为0。
space-around：与space-between相似。不同点为，第一个项目离主轴起点和最后一个项目离主轴终点距离为中间项目间间距的一半。

space-evenly：项目间间距、第一个项目离主轴起点和最后一个项目离主轴终点距离等于项目间间距。

图4-9 justify-content

align-items 属性

设置项目在行中的对齐方式。

.container{

align-items:stretch（默认值） | flex-start | center | flex-end | baseline

}

stretch（默认值）：项目拉伸至填满行高。
flex-start：项目顶部与行起点对齐。
center：项目在行中居中对齐。
flex-end：项目底部与行终点对齐。
baseline：项目的第一行文字的基线对齐。。

图4-10 align-items

align-content 属性

多行排列时，设置行在交叉轴方向上的对齐方式，以及分配行之间及其周围多余的空间。

.container{

}

stretch（默认值）：当未设置项目尺寸，将各行中的项目拉伸至填满交叉轴。当设置了项目尺寸，项目尺寸不变，项目行拉伸至填满交叉轴。

flex-start：首行在交叉轴起点开始排列，行间不留间距。

center：行在交叉轴中点排列，行间不留间距，首行离交叉轴起点和尾行离交叉轴终点距离相等。

flex-end：尾行在交叉轴终点开始排列，行间不留间距。
space-between：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为0。
space-around：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为行与行间间距的一半。

space-evenly：行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等。

图4-11 align-content

(3)、项目属性

设置项目，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。

order 属性

设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前。属性值为整数，默认是0。

.item{

order: 0（默认值） | <integer>

}

图4-12 order

flex-shrink 属性

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

.item{

flex-shrink: 1（默认值） | <number>

}

.item1{

width: 120px;

flex-shrink: 2;

}

.item2{

width: 150px;

flex-shrink: 3;

}

.item3{// 项目3未设置flex-shrink，默认flex-shrink值为1

width: 180px;

}

为了加深理解，我们举个例子：

一个宽度为400px的容器，里面的三个项目width分别为120px，150px，180px。分别对这项目1和项目2设置flex-shrink值为2和3。

.container{

display: flex;

width: 400px; // 容器宽度为400px

}

在这个例子中，项目溢出 400 - (120 + 150 + 180) = -50px。计算压缩量时总权重为各个项目的宽度乘以flex-shrink的总和，这个例子压缩总权重为120 * 2 + 150 * 3+ 180 * 1 = 870。各个项目压缩空间大小为总溢出空间乘以项目宽度乘以flex-shrink除以总权重：

item1的最终宽度为：120 - 50 * 120 * 2 / 870 ≈ 106px

item2的最终宽度为：150 - 50 * 150 * 3 / 870 ≈ 124px

item3的最终宽度为：180 - 50 * 180 * 1 / 870 ≈ 169px

其中计算时候值如果为小数，则向下取整。

图4-13 flex-shrink

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

.container{

display: flex;

width: 400px; // 容器宽度为400px

}

.item1{

width: 120px;

flex-shrink: 0.1;

}

.item2{

width: 150px;

flex-shrink: 0.2;

}

.item3{

width: 180px;

flex-shrink: 0.3;

}

总权重为：120 * 0.1 + 150 * 0.2 + 180 * 0.3 = 96。参与计算的溢出空间不再是50px，而是50 * (0.1 + 0.2 + 0.3) / 1 =30：

item1的最终宽度为：120 - 30 * 120 * 0.1 / 96 ≈ 116px

item2的最终宽度为：150 - 30 * 150 * 0.2 / 96 ≈ 140px

item3的最终宽度为：180 - 30 * 180 * 0.3 / 96 ≈ 163px

flex-grow 属性

当项目在主轴方向上还有剩余空间时，通过设置项目扩张因子进行剩余空间的分配。属性值为项目的扩张因子，属性值取非负数。

.item{

flex-grow: 0（默认值） | <number>

}

为了加深理解，我们举个例子：

一个宽度为400px的容器，里面的三个项目width分别为80px，120px，140px。分别对这项目1和项目2设置flex-grow值为3和1。

.container{

display: flex;

width: 400px; // 容器宽度为400px

}

.item1{

width: 80px;

flex-grow: 3;

}

.item2{

width: 120px;

flex-grow: 1;

}

.item3{// 项目3未设置flex-grow，默认flex-grow值为0

width: 140px;

}

在这个例子中，容器的剩余空间为 400 - (80 + 120 + 140) = 60px。剩余空间按 60 / (3 + 1 + 0) = 15px进行分配：

item1的最终宽度为：80+ (15 * 3) = 125px

item2的最终宽度为：120 + (15 * 1) = 135px

item3的最终宽度为：140 + (15 * 0) =140px

图4-14 flex-grow

需要注意一点，当项目的扩张因子相加小于1时，剩余空间按除以1进行分配。在上面例子的基础上，我们改变各个项目的flex-grow。

.container{

display: flex;

width: 400px; // 容器宽度为400px

}

.item1{

width: 50px;

flex-grow: 0.1;

}

.item2{

width: 80px;

flex-grow: 0.3;

}

.item3{

width: 110px;

flex-grow: 0.2;

}

在这个例子中，容器的剩余空间为 400 - (50 + 80 + 110) = 160px。由于项目的flex-grow相加0.1 + 0.3 + 0.2 = 0.6小于1，剩余空间按 160 / 1 = 160px划分。例子中的项目宽度分别为：

item1的最终宽度为：50 + (160 * 0.1) = 66px

item2的最终宽度为：80 + (160 * 0.3) = 128px

item3的最终宽度为：110 + (160 * 0.2) = 142px

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

.item{

flex-basis: auto（默认值） | <number>px

}

图4-15 flex-basis

flex 属性

是flex-grow，flex-shrink，flex-basis的简写方式。值设置为none，等价于00 auto。值设置为auto，等价于1 1 auto。

.item{

flex: none | auto | @flex-grow @flex-shrink@flex-basis

}

align-self 属性

设置项目在行中交叉轴方向上的对齐方式，用于覆盖容器的align-items，这么做可以对项目的对齐方式做特殊处理。默认属性值为auto，继承容器的align-items值，当容器没有设置align-items时，属性值为stretch。

.item{

}

图4-16 align-self

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

10个免费的响应式布局HTML5+CSS3模板
现在的自由响应式的HTML5模板的有着高度的市场需求,因为他们完全改变了网站设计与开发工业来说,是比较容易的,顺手,高级语言,可以很容易地创建了很多令人惊讶的事情,很快.这些模板是易于定 ...
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,具体使用方法如下: ...

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

响应式 Web 设计 - Viewport

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

最新文章

热门文章