flex-shrink 属性
当项目在主轴方向上溢出时,通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子,属性值取非负数。
flex-direction 属性
通过设置坐标轴,来设置项目排列方向。
.container{
flex-direction: row(默认值) | row-reverse | column | column-reverse
}
row(默认值):主轴横向,方向为从左指向右。项目沿主轴排列,从左到右排列。
row-reverse:row的反方向。主轴横向,方向为从右指向左。项目沿主轴排列,从右到左排列。
column:主轴纵向,方向从上指向下。项目沿主轴排列,从上到下排列。
column-reverse:column的反方向。主轴纵向,方向从下指向上。项目沿主轴排列,从下到上排列。
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。
确保边距和边框包含在元素的宽度和高度间。