四种实现页面适配的方案（转）

文基于掘金作者kkkkkkkkeep的文章，略作补充修改，文末有版权申明

方案一：amfe-flexible+px2rem-loader

amfe-flexible：根据设备宽度，修改根元素html的大小，以适配不同终端
px2rem-loader：将css中的px转为rem单位，用了它就不用自己计算rem值了

注意：amfe-flexible是lib-flexible的优化，主要区别是amfe-flexible不会改变视口大小

安装 + 配置

1. 安装amfe-flexible和px2rem-loader

复制代码npm  install -s amfe-flexible
npm i px2rem-loader --save -dev

2. 配置amfe-flexible

复制代码// 入口文件main.js中引入
import 'amfe-flexible/index.js'

复制代码// 在index.html中修改meta
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

amfe-flexible干了什么呢？

给元素动态改写font-size的值
设置1rem = viewWidth / 10
设置页面刷新时重置rem
支持0.5px

3. 配置px2rem-loader

复制代码// build/utils.js
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75 //默认换算为1rem为75px，可根据你的原型图修改
    }
  }
// 在generateLoaders方法中添加px2remLoader
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

4. 展示效果

iPhoneX（屏幕宽度为375px）

iPhone6/7/8 plus（屏幕宽度为375px）

iPad（屏幕宽度为768px）

方案二：vw实现移动端适配

插件介绍

1. postcss-aspect-ratio-mini

主要用来处理元素容器宽高比。

如果我们想要做一个188:246（188是容器宽度，246是容器高度）这样的比例容器，只需要这样使用：

复制代码[w-188-246] {
  aspect-ratio: '188:246';
}

有一点需要特别注意：aspect-ratio属性不能和其他属性写在一起，否则编译出来的属性只会留下aspect-ratio的值。主要是因为在插件中做了相应的处理，不在每次调用aspect-ratio时，生成前面指定的默认样式代码，这样代码没那么冗余。所以在使用的时候，需要分开来写：

复制代码// 编译前
[w-188-246] {
  width: 188px;
  background-color: red;
}
[w-188-246] {
  aspect-ratio: '188:246';
}

复制代码// 编译后
[w-188-246] {
  width: 25.067vw;
  background-color: red;
}
[w-188-246]:before {
  padding-top: 130.85106382978725%;
}

2. postcss-px-to-viewport

postcss-px-to-viewport主要用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位。

目前出视觉设计稿，我们都是使用750px宽度的，那么100vw = 750px，即1vw = 7.5px。在不想要把px转换为vw的时候，首先在对应的元素（html）中添加配置中指定的类名.ignore或.hairlines(.hairlines一般用于设置border-width:0.5px的元素中)

复制代码// 编译前
.test {
  border: .5px solid black;
  border-bottom-width: 4px;
  font-size: 14px;
  line-height: 20px;
  position: relative;
}
[w-188-246] {
  width: 188px;
}

复制代码// 编译后
.test {
  border: .5px solid #000;
  border-bottom-width: .533vw;
  font-size: 1.867vw;
  line-height: 2.667vw;
  position: relative;
}
[w-188-246] {
  width: 25.067vw;
}

3. postcss-write-svg

postcss-write-svg插件主要使用的是border-image和background来做1px的相关处理。

border-image方式：

复制代码// 编译前
@svg 1px-border {
  height: 2px;
  @rect {
    fill: var(--color, black);
    width: 100%;
    height: 50%;
  }
}
.example {
  border: 1px solid transparent;
  border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}

复制代码// 编译后
.example {
  border: 1px solid transparent;
  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;
}

background-image方式：

复制代码// 编译前
@svg square {
  @rect {
    fill: var(--color, black);
    width: 100%;
    height: 100%;
  }
}

#example {
  background: white svg(square param(--color #00b1ff));
}

复制代码// 编译后
#example {
  background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%2300b1ff' width='100%25' height='100%25'/%3E%3C/svg%3E");
}

4. postcss-cssnext

主要用来让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。

5. cssnano

cssnano主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。不过你也可以使用postcss-loader显式的使用cssnano。

cssnano集成了一些其他的PostCSS插件，如果你想禁用cssnano中的某个插件的时候，可以像下面这样操作：

复制代码"cssnano": {
  autoprefixer: false,
  "postcss-zindex": false
}

6. postcss-viewport-units

postcss-viewport-units插件主要是给CSS的属性添加content的属性，配合viewport-units-buggyfill库给vw、vh、vmin和vmax做适配的操作。

安装 + 配置

1. 安装PostCSS插件

默认PostCSS插件（通过Vue-cli构建的项目默认安装了）：

postcss-import：主要用来处理@import引入路径问题。
postcss-url：主要用来处理文件，比如图片文件、字体文件等引用路径的处理。
autoprefixer：主要用来处理浏览器前缀问题。

复制代码npm i postcss-import --S
npm i postcss-url --S   
npm i autoprefixer --S

其他PostCSS插件：

postcss-aspect-ratio-mini：主要用来处理元素容器宽高比。
postcss-px-to-viewport：主要用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位。
postcss-write-svg：主要使用的是border-image和background来做1px的相关处理。
postcss-cssnext：主要用来让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。
cssnano：主要用来压缩和清理CSS代码。
postcss-viewport-units：主要用来给CSS的属性添加content的属性，配合viewport-units-buggyfill库给vw、vh、vmin和vmax做适配的操作。

复制代码npm i postcss-aspect-ratio-mini --S
npm i postcss-px-to-viewport --S   
npm i postcss-write-svg --S   
npm i postcss-cssnext --S   
npm i postcss-viewport-units --S   
npm i cssnano --S

2. 配置PostCSS插件

复制代码// 根目录下的.postcssrc.js
module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {}, 
    "postcss-write-svg": {
      utf8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750,      // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334,    // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3,        // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw',      // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'],  // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1,       // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false       // 允许在媒体查询中转换`px`
    } 
    "postcss-viewport-units":{},
    "cssnano": {
      "cssnano-preset-advanced": {
        zindex: false,
        autoprefixer: false
      },
    }
  }
}

复制代码// 在index.html中修改meta
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />

什么情况下适合使用vw呢？

容器适配，可以使用vw
文本的适配，可以使用vw
大于1px的边框、圆角、阴影都可以使用vw
内距和外距，可以使用vw

3. 展示效果

iPhoneX（屏幕宽度为375px）

iPhone6/7/8 plus（屏幕宽度为375px）

iPad（屏幕宽度为768px）

方案三：rem + vw （结合方案一和方案二）

方案四：postcss-mobile-forever

https://github.com/wswmsword/postcss-mobile-forever

一款 PostCSS 插件，用于将固定尺寸的移动端视图转为具有最大宽度的可伸缩的移动端视图。该插件可以转换视口单位（px->vw）、限制视图最大宽度（min(vw, px)）、生成适应桌面端和横屏的媒体查询（@media）。

如果您在使用 postcss-px-to-viewport（后简称 px2vw）实现伸缩界面的时候，不希望界面在大屏设备上撑满整个屏幕而难以浏览，希望界面在达到某一个合适的宽度后停止伸缩（限制最大宽度），您可以使用本插件。

您可以在线查看一个范例，通过旋转屏幕、改变窗口大小、在不同屏幕查看展示效果。范例顶部的文字会提示您，当前的视图是移动端竖屏（Portrait）、移动端横屏（Landscape）还是桌面端（Desktop）。

参考文档

使用 Flexible 实现手淘 H5 页面的终端适配 - 掘金
如何在Vue项目中使用vw实现移动端适配 - 掘金
vue移动端h5适配解决方案（rem or vw） - 掘金

作者：kkkkkkkkeep
链接：https://juejin.cn/post/6844903917126434829
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

、发送请求

使用Requests发送网络请求非常简单：

# 导入requests模块，若未安装需要先安装(如: pip install requests)
import requests
#
# GET请求
r = requests.get('https://api.github.com/events')
#
# POST请求
r = requests.post('http://httpbin.org/post', data={'key': 'value'})
#
# DELETE请求
r = requests.delete('http://httpbin.org/delete')
#
# HEAD请求
r = requests.head('http://httpbin.org/get')
#
# OPTION请求
r = requests.options('http://httpbin.org/get')

二、传递URL参数

Requests允许使用params关键字参数，以一个字符串字典来为URL提供参数：

# 将参数以字典形式传递给params
payload = {'key1': 'value1', 'key2': 'value2'}
r = requests.get('http://httpbin.org/get', params=payload)
print(r.url)
#
# 还可以将一个列表作为值传入
payload = {'key1': 'value1', 'key2': ['value2', 'value3']}
r = requests.get('http://httpbin.org/get', params=payload)
print(r.url)

三、响应内容

我们能读取服务器响应的内容：

import requests
r = requests.get('https://api.github.com/events')
#
# 使用r.text时，requests会自动检测文本编码并将内容打印出来
print(r.text)
#
# 我们可以通过修改r.encoding来修改编码方式
print(r.encoding) # 'utf-8'非常常见
r.encoding = 'ISO-8859-1'
#
# 有些HTML、XML页面指定了不同的编码，我们可以通过r.content来找到编码，然后设置r.encoding为响应的编码，这样既可正确解析r.text。

四、二进制响应内容

对于非文本请求，我们也能以字节的方式访问请求响应体：

print(r.content)
#
# Requests会自动解码gzip、deflate传输编码的响应数据
# 例如，以请求返回的二进制数据创建一张图片：
from PIL import Image
from io import BytesIO
i = Image.open(BytesIO(r.content))

五、JSON响应内容

Requests中有一个内置的JSON解码器，可以帮助我们处理JSON数据

import requests
r = requests.get('https://api.github.com/events')
#
# 使用r.json()来解析json格式的数据，若解析失败，会抛出一个异常。
print(r.json())
#
# r.json()调用成功并不意味着响应成功，检查请求是否成功可以使用如下两个方式：
print(r.raise_for_status())
print(r.status_code)

六、原始响应内容

在罕见的情况下，我们可能想获取来自服务器的原始套接字响应：

r = requests.get('https://api.github.com/events', stream=True)
print(r.raw)
print(r.raw.read(10))
#
# 但一般情况下，我们应该先将文本流保存到文件
with open(filename, 'wb') as writer:
 for chunk in r.iter_content(chunk_size):
 writer.write(chunk)

七、定制请求头

如果想为请求添加HTTP头部，只要简单地传递一个dict给headers参数即可：

url = 'https://api.github.com/some/endpoint'
headers = {'user-agent': 'my-app/0.0.1'}
r = requests.get(url, headers=headers)
#
# 定制header的优先级低于某些特定的信息源，如：
# 1. 如果在.netrc中设置了用户认证信息，使用headers=设置的授权就不会生效，而如果设置了auth=参数，.netrc的设置就无效了。
# 2. 如果被重定向到别的主机，授权header就回被删除
# 3. 代理授权header会被URL中提供的代理身份覆盖掉
# 4. 在我们能判断内容长度的情况下，header的Content-Length会被改写。

八、更复杂的POST请求

通常，你想要发送一些编码为表单形式的数据--非常像一个HTML表单，要实现这个，只需要简单传递一个字典给data参数，它会自动编码：

payload = {'key1': 'value1', 'key2': 'value2'}
r = requests.post('http://httpbin.org/post', data=payload)
print(r.text)
#
# data参数还接受元组的形式
payload = (('key1', 'value1'), ('key2', 'value2'))
r = requests.post('http://httpbin.org/post', data=payload)
print(r.text)
#
# 很多时候我们想要发送的数据并非编码为表单形式的，比如我们就是要传递string而不是按照dict解析，那么数据将会被直接发布出去
import json
url = 'https://api.github.com/some/endpoint'
payload = {'some': 'data'}
r = requests.post(url, data=json.dumps(payload))
#
# 除了自行对dict编码，还可以使用json参数直接传递：
r = requests.post(url, json=payload)

九、POST一个多部分编码(Multipart-Encoded)的文件

# 如：上传xls文件
url = 'http://httpbin.org/post'
files = {'file': open('report.xls', 'rb')}
r = requests.post(url, files=files)
print(r.text)
#
# 我们可以显式地设置文件名、文件类型和请求头：
url = 'http://httpbin.org/post'
files = {'file': ('report.xls', open('report.xls', 'rb'), \
 'application/vnd.ms-excel', {'Expires': '0'})}
r = requests.post(url, files=files)
print(r.text)
#
# 我们也可以发送作为文件来接收的字符串
url = 'http://httpbin.org/post'
files = {'file': ('report.csv', 'some,data,to,send\nanather,row,to,send\n')}
r = requests.post(url, files=files)
print(r.text)

十、响应状态码

r = requests.get('http://httpbin.org/get')
print(r.status_code)
#
# 为方便引用，Requests还附带了一个内置的状态码查询对象
print(r.status_code == requests.codes.ok)
#
# 如果发送了一个错误请求(比如一个4XX客户端错误，或者5XX服务器错误响应)，我们可以通过Response.raise_for_status()来抛出异常：
bad_r = requests.get('http://httpbin.org/status/404')
print(bad_r.status_code)
bad_r.raise_for_status()

十一、响应头

# 我们可以查看以字典形式展示的服务器响应头
print(r.headers)
#
# eg.1 一个响应头
{
 'content-encoding': 'gzip',
 'transfer-encoding': 'chunked',
 'connection': 'close',
 'server': 'nginx/1.0.4',
 'x-runtime': '148ms',
 'etag': '"e1ca502697e5c9317743dc078f67693f"',
 'content-type': 'application/json'
}
#
# HTTP头部是大小写不敏感的，因此如下都是可以的：
print(r.headers['Content-Type'])
print(r.headers.get('content-type')

十二、Cookie

# 通过.cookies可以访问响应所包含的cookie
url = 'http://example.com/some/cookie/setting/url'
r = requests.get(url)
print(r.cookies['example_cookie_name'])
#
# 要发送cookies到服务器，可以使用cookies参数：
url = 'http://httpbin.org/cookies'
cookies = dict(cookies_are='working')
r = requests.get(url, cookies=cookies)
print(r.text)
#
# Cookie的返回对象是RequestsCookieJar，它的行为和字典类似，但接口更完整，适合跨域名和跨路径使用，我们还可以把Cookie Jar传到Requests中：
jar = requests.cookies.RequestsokieJar()
jar.set('tasty_cookie', 'yum', domain='httpbin.org', path='/cookies')
jar.set('gross_cookie', 'blech', domain='httpbin.org', path='/elsewhere')
url = 'http://httpbin.org/cookies'
r = requests.get(url, cookies=jar)
print(r.text)

十三、重定向与请求历史

默认情况下，除了HEAD，Requests会自动处理所有重定向。

可以使用响应对象的history方法来追踪重定向，Response.history是一个Response对象的列表，这个对象列表按照从最老到最近的请求进行排序。

r = requests.get('http://github.com')
print(r.url)
print(r.status_code)
print(r.history)
#
# 如果使用的是GET、OPTIONS、POST、PUT、PATCH或者DELETE，那么我们可以通过allow_redirects参数禁用重定向处理：
r = requests.get('http://github.com', allow_redirects=False)
print(r.status_code)
print(r.history)
#
# 如果使用了HEAD，我们也可以启用重定向：
r = requests.head('http://github.com', allow_redirects=True)
print(r.url)
print(r.history)

十四、超时

timeout参数用于设置等待响应的最长时间，即requests会在等待该时间之后停止等待响应。若不设置该参数，程序可能会永远失去响应：

requests.get('http://github.com', timeout=0.001)

十五、错误与异常

遇到网络问题时，Requests会抛出一个ConnectionError异常
如果HTTP请求返回了不成功的状态码，Response.raise_for_status()会抛出一个HTTPError异常
若请求超时，则抛出Timeout异常
若请求超过了设定的最大重定向次数，则抛出TooManyRedirects异常
所有Requests显式抛出的异常都继承自requests.exceptions.RequestException

一步：

安装postcss-px2rem、px2rem-loader

打开命令行工具，输入以下指令安装插件

npm install postcss-px2rem px2rem-loader --save

安装完后package.json文件会多如图两个插件

第二步：

在根目录src中新建utils目录下新建rem.js等比适配文件

const baseSize = 16
// 设置 rem 函数
function setRem() {
    // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920
    // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}

第三步：

在main.js中引入适配文件

import './utils/rem'

第四步：

vue.config.js文件中配置插件

在线咨询

上一篇：Java开发面试过程中的问题整理
下一篇：单页网站设计指南

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

四种实现页面适配的方案（转）

方案一：amfe-flexible+px2rem-loader

安装 + 配置

1. 安装amfe-flexible和px2rem-loader

2. 配置amfe-flexible

3. 配置px2rem-loader

4. 展示效果

方案二：vw实现移动端适配

插件介绍

1. postcss-aspect-ratio-mini

2. postcss-px-to-viewport

3. postcss-write-svg

4. postcss-cssnext

5. cssnano

6. postcss-viewport-units

安装 + 配置

1. 安装PostCSS插件

2. 配置PostCSS插件

3. 展示效果

方案三：rem + vw （结合方案一和方案二）

方案四：postcss-mobile-forever

参考文档

、发送请求

二、传递URL参数

一步：

第二步：

第三步：

第四步：

您的项目需求