pc端和移动端的响应式，以及自适应的区别，两者的适用范围

2022-01-15 21:28:30

1.响应式跟自适应有什么区别?

　　响应式网站：https://www.microsoft.com/zh-cn/

　　自适应网站：http://m.ctrip.com/html5/

自适应是最早出现的，后面才有了响应式。

1. 响应式布局是流动网格布局（各个区块的位置都是浮动的，不是固定不变的）。用不同设备（电脑、平板、手机）去访问此页面，最后看到的布局和内容是有很大不同。

2. 自适应布局是使用固定分割点来进行布局。不管访问设备如何的不同（下图是三台尺寸不一样的手机），最后看到的页面内容和布局基本上还是一样的，就是尺寸略有不同。

2.实现响应式有哪几种方式?

2.1.使用媒体查询(Media Query) 结合 rem字体

记住,先在<head>标签里加入这个meta标签(设置设备按照一比一的尺寸进行显示，并且禁止用户缩放页面):

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

其次是媒体查询，这个大家应该都知道，这个是响应式最重要的部分。

如果大于1000px，就用：

@media screen and (min-width:1000px){...}              对应PC端页面

如果在小于1000px和大于768px之间：

@media screen and (max-width:1000px) and (min-width:768px) {...}        对应平板端页面

如果小于768px：

@media screen and (max-width:768px){...}           对应手机端页面

整合起来的话，就是：

@media screen and (min-width:1000px){
　　html,body{
　　　font-size:.8rem;
　　}
}  
    
@media screen and (max-width:1000px) and (min-width:768px){
　　html,body{
　　　font-size:.7rem;
　　}
}  

@media screen and (max-width:768px){
　　html,body{
　　　font-size:.6rem;
　　}
}

也可以通过媒体查询选择性加载css，意思是自动探测屏幕宽度，然后加载相应的CSS文件。

<link rel="stylesheet" type="text/css"
        media="screen and (max-device-width: 400px)"
        href="tinyScreen.css" />

以上代码表示：如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

link rel="stylesheet" type="text/css"
        media="screen and (min-width: 400px) and (max-device-width: 600px)"
        href="smallScreen.css" />

以上代码表示：如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

注意！使用响应式，宽度使用百分比，尽量少使用绝对值宽度。由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。

// 不能使用一下css代码：
div{width：50 px}

//在响应式中，应该这么使用：
div{
    width:100%;
    //或者
    width:auto;
}

字体的设置相对大小

移动端字体也不能使用绝对大小（px），而只能使用相对大小（em）或者高清方案（rem）,rem不局限于字体大小，前面的宽度width也可以使用，代替百分比

// 设置字体大小为默认大小，16像素
body{
    font: normal 100% Helvetica, Arial, sans-serif;
}

// 在移动端设置字体
p{font-size: 1.5em}

示例：

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
    <meta charset="utf-8">
    <!-- 注释了meta标签-->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> -->
</head>
<style type="text/css">
    p{border: 1px solid black;}
</style>
<body>
<div>
    <p>响应式原理</p>
</div>
</body>
</html>

看结果：字体很小，看不清，是因为按照电脑上的像素对字体进行设置的，分辨率不一样。