一、视口 viewport

手机有不不同的分辨率，不不同的屏幕大小，如何使我们开发的应用或页
面大小能适合各种高端手机使用？
学习html5 viewport能帮助我们实现这一点。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
width=device-width    设置宽度为屏幕宽度
maximum-scale=1.0     设置最大缩放比例0.25 — 10.0  
minimum-scale=1.0
设置最小缩放比例:不能小于初始化的比例0.25 — 10.0  
user-scalable=no 禁止用户捏合  
width=device-width  
height=device-height  
设置宽度为屏幕的宽度/设置⾼高度为屏幕的高度
可以设置⼀一个固定的值 尽可能不不这样使用
设置为设备的宽度： device-width  
height是设置高度使用的，我们很少使用  
initial-scale=1.0 设置初始化的缩放比例 
maximum-scale=1.0  
minimum-scale=1.0  
设置最大缩放比和最小缩放比值的范围是0.25 ~ 10.0
user-scalable=no  
user-scalable=0  
是否允许用户进行缩放网页  
值
yes(默认) / 1
no / 0
如果设置为no，
那么minimax-scale和maximum-scale将被忽
略，因为不不允许缩放

所以一般我们可以复制这段到我们的项目中

1
<meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,uer-scalable=no" />

二、响应式布局

定义
为不不同屏幕分辨率定义不不同的布局使一个网站能兼容多个终端—而不不是为每个终端做一个特定的版本 这个概念是为了了解决移动互联网浏览而诞生的 。

为什什么需要？
响应式布局可以为不不同终端的用户提供更更加舒适的页面和更更好的用户体验
随着目前大屏幕移动设备的普及，可以用“大势所趋”来形容。

CSS3加入的媒体查询使得无需修改内容便便可以使样式应用于某些特定的设备范围

作用 通过不不同的屏幕大小定义不不同的样式

媒体查询的大部分媒介特性都接收min和max用于表达：大于或等于和小于或等于

媒体类型 ：
screen 屏幕
print 打印机
默认为all，我们通常写screen
媒体属性
min-width
max-width
逻辑操作符and用来把多个媒体属性组合起来，合并到同一条媒体查询中

样式表中内嵌@media 

1
2
3
4
5
6
7
8
9
10
11
div {
    	width: 100px;
    	height: 100px;
    	background: red;		
    }

@media only screen and (min-width: 1000px) and (max-width: 1100px){
	div {
		background: yellow;
	}
}

在link中使用@media 

1
<link rel=“stylesheet” type=“text/css” media=“only screen and (max-width: 480px)” href=“link.css”>

三、多列布局

简介：CSS多列列布局继承自块级布局模式，允许简单地定义多列文本

当阅读文字的时候，从干一行末尾移动到下一行开始处，容易弄错读到了哪一行。
为了最优化使用大的显示屏幕，设计中应限制文字段落的宽度而并列列排布类似报纸

使用 ：
列数和宽度：

设置列数： column-count

设置每列列宽度 ：column-width

columns ：column-count和column-width的简写,优先保证宽度，在宽度至少能达到指定宽度时，设置列列数 

1
2
3
columns: 5;
columns: 20em;
columns: 12 8em;

列间隙 ：列之间的间隙建议值为1em 

1
2
3
column-gap
column-gap: 2em;
column-gap: 20px;

优雅降级(浏览器器兼容性)：

多列属性会被不支持多列模型的浏览器器忽略

注意
不是所有的浏览器器都支持不带前缀的属性 

1
2
-moz-
-webkit-

写的时候最好写三次 

1
2
3
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;

列边框设置： 

1
2
3
4
5
column-rule-width：  
                5px;  
                thin 最窄  
                medium 中等  
                thick 最厚

column-rule-color
column-rule-style 和border-style的值一样
column-rule 复合属性 

1
column-rule: 2px solid cyan;

跨列列 ： 

1
column-span all 指定元素跨越所有列

四、用户界面

简介 在CSS3中，增加了一些新的用户界面特性来跳转元素尺寸，框尺寸和外边框。
1.resize :指定了某个元素是否可以由用户调整大小
使用时，需要添加 overflow: auto;
值
vertical 竖直方向
horizontal 水平方向
both 都
2.outline-offset

轮廓相关属性 :
outline-width(2)
outline-style(2)
outline-color(2)
outline(2) :轮廓特点 不占用空间
轮廓偏移值 

1
outline-offset: 10px;

3.text-overflow
当文本超出时，应该显示什么
值
ellipsis …
clip 直接被裁剪掉
配合属性
overflow: hidden;
white-space: no-wrap; 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#div1 {
    	width: 100px;
    	height: 100px;
    	border: 1px solid red;
    	overflow: auto;
    	resize: horizontal;
    }
    
    #p1 {
    	width: 8rem;
    	border: 1px solid green;
    	
    	outline: 1px dotted red;
    	outline-offset: 5px;
    }
    
    
    #p2 {
    	width: 10rem;
    	height: 1rem;
    	border: 1px solid gray;
    	
    	
    	/*overflow: hidden;*/
    	white-space: nowrap;
    	text-overflow: ellipsis;
    	white-space: normal;
    }

4.cursor 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<p id="p1" style="cursor:none">none</p>
    <p id="p2" style="cursor: context-menu;">contentxt-menu</p>
    <p id="p3" style="cursor: cell;">cell</p>
    <p id="p4" style="cursor: vertical-text;">vertical-text</p>
    <p id="p5" style="cursor: alias;">alias</p>
    <p id="p6" style="cursor: copy;">copy</p>
    <p id="p7" style="cursor: no-drop;">no-drop</p>
    <p id="p8" style="cursor: not-allowed;">not-allowed</p>
    <p id="p9" style="cursor: nesw-resize;">nesw-resize</p>
    <p id="p10" style="cursor: nwse-resize;">nwse-resize</p>
    <p id="p11" style="cursor: col-resize;">col-resize</p>
    <p id="p12" style="cursor: row-resize;">row-resize</p>
    <p id="p13" style="cursor: all-scroll;">all-scroll</p>
    <p id="p14" style="cursor: zoom-in;">zoom-in</p>
    <p id="p15" style="cursor: zoom-out;">zoom-out</p>

移动端      移动端

本博客所有文章除特别声明外，均采用 CC BY-SA 3.0协议 。转载请注明出处！