自适应与响应式

01响应式（Responsive）与自适应（Adaptive）分别是什么，有什么区别和共同点

响应式设计（Responsive Design）：
响应式设计使用弹性网格布局，灵活的图片和媒体查询（CSS3 Media Queries）等技术。
它能够自动检测设备的屏幕大小，并调整网页的布局和内容显示方式，以适应不同屏幕尺寸。
一个响应式网站只有一套代码，可以适应各种设备，包括但不限于智能手机、平板电脑、桌面电脑。
响应式设计强调的是“一把钥匙开多把锁”，即一个设计适配所有设备。

自适应设计（Adaptive Design）：
自适应设计通常为不同的屏幕尺寸预设了不同的布局，然后根据设备屏幕的大小选择最合适的布局。
它可能会使用多个固定的布局宽度，例如为手机准备一个布局，为平板准备另一个，为桌面电脑准备第三个。
自适应设计在检测到设备屏幕尺寸变化时，会切换到预定义的布局中最为匹配的那一个。
自适应设计强调的是“多把钥匙开多把锁”，即多个设计分别适配不同设备。

总的来说，响应式设计更加灵活，可以更好地适应不断涌现的新设备和屏幕尺寸，而自适应设计则可能更简单，
性能消耗也更小。
二者都是为了页面适配不同屏幕尺寸而进行的页面调整
如下图所属是对分别对应响应式和自适应

响应式和自适应设计之间的区别。自适应设计需要根据不同尺寸和设备来设计多种布局页面，而响应式设计只需要设计一套页面即可，通过缩放图像、换行或调整页面布局来适应各种尺寸的屏幕。
区分自适应和响应式设计的方法是看不同的设备上打开时是否显示相同的网址。如自适应页面的pc端和手机端一般网址不同，自适应一般会在前面加个m或mobile等作区分。
我们项目过程中使用较多的目前就是自适应

02案例页面分析

响应式案例：山东省政府
自适应案例：新华网：http://www.news.cn/

响应式站点不同设备访问时地址不变，而自适应访问新华网时，会自动跳转到新华网的手机站
当我们用电脑打开新华网站点后，可以观察到域名是：
http://www.news.cn/
，但是当我们调整浏览器窗口，并刷新页面，发现域名变成了
http://m.news.cn/
，也就是专门针对移动端设备跳转了指定的页面

03 常用尺寸

常用的响应式尺寸

尺寸：320px
320px是最小的移动设备屏幕尺寸，也是最常见的尺寸之一。这个尺寸通常用于iPhone 4和iPhone 5等较小的手机屏幕。

尺寸：480px
480px是另一个常见的移动设备屏幕尺寸。这个尺寸通常用于Android手机和iPhone 6等较小的手机屏幕。

尺寸：768px
768px是平板电脑屏幕尺寸的标准尺寸之一。这个尺寸通常用于iPad等平板电脑屏幕。

尺寸：1024px

1024px是另一个常见的平板电脑屏幕尺寸。这个尺寸通常用于iPad Pro等较大的平板电脑屏幕。在响应式网站设计中，我们需要为这个尺寸设置相应的样式，以确保网站在这个尺寸下也能够正常显示。

尺寸：1280px

1280px是常见的笔记本电脑屏幕尺寸之一。这个尺寸通常用于13英寸的笔记本电脑屏幕。在响应式网站设计中，我们需要为这个尺寸设置相应的样式，以确保网站在这个尺寸下也能够正常显示。

04 自适应、响应式页面制作规范和方法

制作方法

响应式开发的核心

1.通过meta标签来调整视口

2.通过媒体查询的方式来为不同的设备加载相应的样式

3.布局

04.1通过meta声明来调整视口

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

表示含义：设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面，页面宽度为设备视口宽度

<meta name="viewport" content="width=device-width, initial-scale=1">

如果我们需要页面支持自适应，可以添加这个meta 允许缩放

04.2媒体查询

媒体查询，又名媒介查询。主要作用就是根据网页的具体条件，来告知浏览器如何为指定的视图宽度渲染页面。
具体的表现方式有两种。一种可以说是按需加载，也就是根据视图的宽度大小来加载不同的样式表。方式如下

通常项目中的响应式/自适应涉及只包含pc和移动端，因此，固定如下两种边界尺寸（可根据需要进行改写）：
@media only screen and (min-width:769px){ } 
@media only screen and (max-width:768px){ } 
另外，提供以下边界尺寸，作为项目中的特殊需求：
@media only screen and (min-width:769px) and (max-width: 992px){ /* 平板尺寸 / } 
@media only screen and (min-width:993px) and (max-width: 1200px){ / 中屏幕电脑 / } 
@media only screen and (min-width:1200px){ / 大屏幕电脑 */ } 

04.3布局调整

在实现响应式时，我们一般要改变页面的布局，如一行边两行等，这时我们可以使用弹性布局来达到效果，当然这个没有作为硬性要求，浮动也同样可以实现，但是相同情况下，弹性布局要比浮动在自适应调整时代码量修改少。
一般情况下我们可以通过调整单位来实现何修改页面布局。
pc端常用的时px，但是要使用弹性布局，可以将固定的长度修改为相对的，如 %，rem等

-01 使用弹性布局
-02 使用浮动布局

以下是完整的长度单位

在编写Web网页中，长度单位是非常常用的一个单位。通过设置长度单位对页面的内容进行调整，来达到符合要求或者说看上去舒服的效果排版效果。传统的单位有：px、%、em，而随着技术的发展，css3增加了一些新的单位rem、vh、vw、vm等，使我们的web页面能适应各种不同的终端显示。

1、px： px是Pixel的缩写，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中。

2.百分比%：百分比%就是相对于父元素尺寸来进行计算的，比如定义两个div元素,div1包含div2,设置父div1的width为100px,子div2的width为50%,则实际上计算的结果就是：子div2的宽度是100px*50% = 50px

1、如果用来设置字体，相对的是父元素的字体大小，大多数浏览器中默认的字体尺寸是100%。
2、如果用来设置宽和高等非字体尺寸，则以百分比为单位的长度值是基于具有相同属性的父元素的长度值。

3.em：相对长度单位。em是相对于当前对象内文本的字体尺寸而计算的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体(16px)尺寸。也就是1em=16px。

4.Rem：rem和em很像，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，从而统一整个页面的长度，只要改动根元素HTML的字体大小就可以统一比例的改动页面中所有使用rem作为长度单位的元素，而不会造成页面内布局错位。
需要注意的是，我们经常用的谷歌浏览器会强制页面的最小字体为12号，即使设置成 10px 最终都会显示成12px。既然html{font-size：62.5%}办不到，那换个思路，将html{font-size：625%}就好了，与html{font-size：62.5%}思路相同，只不是时将1rem = 10px，更正为1rem = 100px而已。

5.vw

        vw是视窗宽度单位。1vw等于可视区宽度的百分之一。如果浏览器的宽是 500px, 1vw求得的值为 5px 。

6.vh

与vw意义相同，同样是将视窗作为参考值，不同的是vh是视窗高度单位。1vh等于可视区高度的百分之一。如果浏览器的高是 800px, 1vh 求得的值为 8px 。

7.vm

严格来说，vm并不是长度单位，他是vmax和vmin这两个长度单位的一个总称

7.1.vmax

vmax是相对于视窗的宽度或高度的百分之一，取决于哪个更大。在宽为500px
高为800px分辨率的显示器下1vm=8px。

7.1.vmin

vmin是相对于视窗的宽度或高度的百分之一，取决于哪个更小。在宽为500px高
为800px分辨率的显示器下1vm=5px

8.rpx：

rpx是微信小程序开发中新出了尺寸单位rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。微信官方建议视觉稿以iPhone 6为标准.

以上就是所有的单位，不过我们最常用的就是px，%，和rem 基本上这几种也完全够我们实现项目中的页面要求了
我们在将pc页面修改为移动端页面时，一下以两个页面为例

05 根据页面尺寸调整rem值

4.自适应页面 若需要根据不同尺寸跳转不通轮径，只需要页面加载时判断所访问的设备，然后跳转其他页面即可，其写法可以不用媒体查询，直接采用正常pc端写法即可，相当于wap站，类似新华网这样

目前项目中这种专门跳转手机端的页面已经很少使用，若需适配移动端，基本都是使用@media 在同一个页面中进行响应式改造即可

同时，为了减少工作量，我们可以使用一些根据窗口调整根元素值得方法（调整rem），再有设计图的情况下，可以配合设计图一起使用 看 rem.js

// 自适应响应式页面需加上以下js，为了使文字能够自适应页面改变html的字体大小
// 这个是根元素在750尺寸时为16px 优点是 与pc端页面修改不大，缺点是计算rem时比较费力
$(function () {
    getRem();
    window.onresize = function () {
        getRem();
    };
})

function getRem() {
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    var fontSize = (oWidth / 750) * 16;
    if (fontSize > 16) {
        fontSize = 16;
    }
    html.style.fontSize = fontSize + "px";

}



//这个是根元素在750尺寸时为100px 优点是 方便计算rem值，缺点是pc端的所有尺寸字号等若使用rem，需要都重新设置一下，不然会很大


function sm() {
    //获取html元素
    var psd = 750;
    var html = document.getElementsByTagName('html')[0];
    //屏幕的宽度（兼容处理）
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    //750这个数字是根据你的设计图的实际大小来的，所以值具体根据设计图的大小
    html.style.fontSize = w / psd * 100 + "px";
}


/*手机版判断*/
if (navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
    //手机
    sm();
    $(window).resize(function () {
        sm();
    })
} else {
    //电脑
    $("html").css("fontSize", "");
}

/*屏幕小于768*/
if ($(window).width() < 1201) {
    sm();
} else {
    $("html").css("fontSize", "");
}

$(window).resize(function () {
    if ($(window).width() < 1201) {
        sm();
    } else {
        $("html").css("fontSize", "");
    }

})