响应式和自适应 | 初一开源

# 响应式和自适应

不同的设备展示效果不一致 ,为了方便用户的使用游览

怎么针对不同设置?让显示效果不一致?

自适应(通过js来识别 )

为一个网站开发多个不同的页面,针对不同的设备用户返回不同的页面

响应式

做一个网站,能够自动的响应不同设备的变化,出现不同的效果

响应式本质是根据设备(游览器的宽度)展示不同的页面效果(修改样式去进行样式覆盖),这里用到的核心就是媒体查询.

媒体查询

基本概念

不同的设备有不同的尺寸 ,使用一套可能不适用所有的情况。
简单来说就是针对不同的媒体类型（比如屏幕、打印机或者屏幕阅读器）定义不同的样式，可以针对不同的屏幕尺寸设置不同的样式（比如手机iphone6和iPhone6plus它们两尺寸是不一样的、笔记本电脑和电脑屏幕也是不一样的大小).
应用了响应式布局我们就可以实现在小尺寸的屏幕上或者大尺寸的台式机的屏幕上显示的效果是接近的，或者说不至于出现样式的错乱。

媒体:设备信息(查询设备的显示宽度),根据不同的条件应用不同的CSS

@media 定义媒体查询查询设备宽度

当设备的宽度满足一定条件的时候,样式会生效

# 媒体类型（分为四种）
1. all（所有设备）
2. screen（电脑屏幕，平板电脑，智能手机）
3. print（打印机和打印预览）
4. speech（屏幕阅读器等发声设备，一般是供盲人浏览网页使用）
条件

:max-width 最大宽度

min=width 最小宽度

大于使用min-width 媒体类型大于或等于指定宽度时，样式生效

小于使用max-width 媒体类型小于或等于指定的宽度时，样式生效

小于max-width-------并且大于*min-width 媒体类型小于并且大于指定宽度时,样式生效,中间用and连接

给一个范围而不是固定的值

媒体特性

1）(width:700px)

2）(max-width:700px) 最大值的700 (x<=700)

3)(min-width:700px) 最小值的700 (x>=700)

4)(min-width:200px) and (max-width:600px) (200<=x<=600)

5)(orientation:portrait) 竖屏

6)(orientation:landscape) 横屏

		p{
			display: none;
		}
	@media all and (min-width:800px){
			.info{
				display: block;
			}
		}
	<p>现在页面宽度大于800px</p>
	/*显示将不显示的样式覆盖了*/

1
2
3
4
5
6
7
8
9
10

		 p{
			width: 80%;
			background-color: skyblue;
		}
		@media all and (min-width:1000px){
			p{
				width: 300px;
			}
		}
	<p>现在页面宽度大于1000px</p>

1
2
3
4
5
6
7
8
9
10

小于等于1000px,大于等于800px生效用and连接

		ul{
			display: flex;
		}
		ul>li{
			flex-grow: 1;
			width:400px;
			height: 300px;
			box-shadow: 0 0 20px purple inset;
		}
		@media all and (max-width:1000px) and (min-width:800px){
			.list{
				flex-direction: column;
			}
		}
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

, 表示或的意思

@media all and (max-width: 600px) , (min-width: 800px) {
			.list{
				flex-direction: column;
			}
		}

1
2
3
4
5

	/*多列布局*/ 
	<ul class="wrap">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

	.wrap>li {
            border: 2px solid red;
            font-size: 50px;
            margin: 20px;
        }

   @media screen and (min-width:924px) {
            .wrap>li {
                float: left;
                width: 20%;
            }
        }

       @media screen and (min-width:768px) and (max-width:992px) {
            .wrap>li {
                float: left;
                width: 25%;
            }
        }

       @media screen and (max-width:768px) {
            .wrap>li {
                float: left;
                width: 30%;
            }
        }

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
29
30
31
32
33
34
35
36
37

写很多分界点:你的开发成本也很高.

了解常见的网站宽度几个分界点

超小屏幕(移动设备) 768px 以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上
由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如 bootstrap 来完成一部分工作，当然也可以自己写响应式。
断点什么合适没有标准答案
一般1440 1366 1024 768px

更详细市场调研

怎么引入响应式

1.内联样式

2.外部样式引入

1）link

2)@import @import url("1.css") screen and (max-width:600px);

写style标签里面的第一排

总结一句
优点：

1.面对不同分辨率设备灵活性强能够快捷适应问题

缺点

1.工作量很大代码累赘

2.使加载时间延长

媒体查询好用,但不是万能,并且现在开发也不是纯响应式

自适应+响应式

判断设备:发给你不同的页面,页面具体响应式的能力.

# viewport

移动端适配 viewport 元标签,可以结合比例控制大小来完成移动端适配

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
统一手机端设备的分辨率比例,不允许缩放.

width=device-width ：表示宽度是设备屏幕的宽度
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。禁止缩放 因为缩放 页面布局会乱
user-scalable：用户是否可以手动缩放 yes /no

1
2
3
4
5
6
7
8

rem :布局思想

rem单位:字体大小单位

和我们的em单位很像1em =16px

假如给一个div标签设置字体大小为20px,里面的子元素字体大小就是20px,里面的1em也就是20px;

rem（root elemnet em根元素）是相对于根元素
,如果html元素没有设置font-size,则默认1rem=16px.

	<section class="wrap">
		我要忘了你的样子1
		<div>
				我要忘了你的样子2
			<div>
				我要忘了你的样子3
			</div>
		</div>
	</section>
		.wrap{
			font-size: 30px;
		}
		div{
			font-size:.8em;/*字体大小会依次减小*/
		}
		div{
			font-size: .8rem;/*字体大小完全统一*/
		}
		html{
			font-size: 40px;
		}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

rem:html根标签的字体大小的倍数,值是完全统一的,标准的衡量单位,通常用于移动端开发

不同设备中默认字体大小不一致,但是,看上去是一样大的,和页面成比例.

根据不同设备设计的字体大小,来统一页面的大小

html标签的字体大小可以关联当前的设备大小

html字体大小,就可以用来进行页面开发布局

同样的内容,使用rem进行布局,如果我在一个较小的设备A上显示为宽度的一半,那换到较大的设备B之后同样也会是宽度的一半.

rem统一了不同设备的分辨率,使得同一个rem在不同设备占比一致

上面说HTML标签大小可以关联到当前设备大小,怎么关联的呢?

Js控制查询设备宽度,提供js获取的屏幕宽度,

设置html标签的字体大小,让页面效果统一.

学会获取屏幕宽度,就可以设置Html的字体大小了.

rem适配

	<script>
        var html = document.querySelector('html');

        function changeRem() {
            var width = html.getBoundingClientRect().width;
            html.style.fontSize = width / 10 + "px"
        }
        changeRem();

        window.addEventListener('resize', changeRem)
    </script>

1
2
3
4
5
6
7
8
9
10
11

# css新增单位

VW/VH

1VW = 设备视口1%宽度

1VH = 设备视口1%高度
div{
			width: 50vw;
			height: 50vh;
			background-color:green;
		}
		<div></div>
/*相对于视口的50%宽高,视口也就是游览器你能够看到的区域*/
1
2
3
4
5
6
7
1vmin 视口宽度和高度之间的最小值的1/100

1vmax 视口高度和宽度之间最大值的1/100
	div{
			width: 50vmin;
			height: 50vmin;
			background-color:green;
		}
/*视口宽度和视口高度相比较,视口宽度少于高度,相对于视口宽度的50%,谁小跟谁*/
1
2
3
4
5
6
	div{
			width: 50vmax;
			height: 50vmax;
			background-color:green;
		}
/*视口宽度和视口高度谁大相对于谁*/
1
2
3
4
5
6
和百分比的区别

百分比会受父级元素的限制

vw和vh不会受到父级元素的限制

← 16-阿里图标组件化 swiper less →