方法一  flexible
一、npm 包安装
lib-flexible 淘宝适配方案
px2rem px自动转rem npm install lib-flexible --save
npm install px2rem-loader 二、在main.js中引入lib-flexible**
import 'lib-flexible/flexible.js' 三、配置build/utils.js
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
} // generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
方法二媒体查询 /* 定一个基准值:100 给设计图中 1rem应该等于多少px 100 */
/* 根据基准值适配不同的屏幕 设计图的大小100/750 = 当前屏幕的fontsize/当前屏幕的大小 */
@media (min-width: 320px) {
html {
font-size: 42.67px
}
} @media (min-width: 375px) {
html {
font-size: 50px
}
} @media (min-width: 750px) {
html {
font-size: 100px
}
}
@media (min-width: 414px) {
html {
font-size: 55.2px
}
} @media (min-width: 420px) {
html {
font-size: 56px
}
} @media (min-width: 480px) {
html {
font-size: 64px
}
} js 适配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.rem {
width: 2rem;
height: 2rem;
font-size: 0.5rem;
background-color: red;
}
p {
width: 3rem /* 300/100 */
}
</style>
<script>
// 防抖
//根据屏幕的大小修改html的fontsize
function fn() {
var screenWidth = window.innerWidth;
var baseWidth = 100
var designWidth = 750
// 求html的fontSize
if (screenWidth <= 320) {
screenWidth = 320
}
if (screenWidth >= 750) {
screenWidth = 750
}
document.documentElement.style.fontSize = baseWidth/designWidth*screenWidth + 'px'
}
fn()
window.addEventListener('resize', fn)
 
</script>
</head>
<body>
<!-- 这段script应该在上面,不然会闪烁 -->
 
<div class="rem">我是一个中国人</div>
 
</body>
</html>

  

手机端适配方案 媒体查询和flexbale的更多相关文章

  1. 关于手机端适配的问题(rem,页面缩放)

    关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...

  2. h5 手机端适配问题汇总

    1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器  能识别 a标签中href的  javascript:; 为网址  ,  55555 3.safari 的弹框如 ...

  3. 手机端适配iPhoneX

    iPhoneX取消了物理按键,改成底部小黑条,这一改动导致网页出现比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常 ...

  4. 移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析

    以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEv ...

  5. rem手机端适配

    <script> document.documentElement.style.fontSize=document.documentElement.clientWidth*100/750+ ...

  6. 手机端适配rem代码片段

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 移动端 rem单位做适配的 媒体查询节点

    @media screen and (min-width:300px){html,body,input{font-size:15px}}@media screen and (min-width:320 ...

  8. Web移动前端开发-——rem+less+媒体查询,rem+flexble.js+媒体查询

    实际开发搞搞起来!!!! rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值 页面re ...

  9. iPhone X适配方案

    iPhone X适配方案 https://github.com/Wscats/iPhone-X 绝对长度单位 英寸 厘米 毫米 磅 pc inch cm mm pt pica 相对长度单位 是网页设计 ...

随机推荐

  1. CMake Error at cmake/OpenCVModule.cmake:295 (message): No extra modules found in folder:Please provide path to 'opencv_contrib/modules' folder

    其实,我们使用的opencv中要用的contrib/modules   是需要额外下载并在cmakelists.txt中指定的 git clone https://github.com/opencv/ ...

  2. kt 集合

    Kotlin初探:Kotlin的集合操作符 2017年11月10日 12:40:03 笨鸟-先飞 阅读数:649   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.c ...

  3. Java中的BigDecimal类精度问题

    bigdecimal 能保证精度的原理是:BigDecimal的解决方案就是,不使用二进制,而是使用十进制(BigInteger)+小数点位置(scale)来表示小数,就是把所有的小数变成整数,记录小 ...

  4. springboot 线程池

    我们常用ThreadPoolExecutor提供的线程池服务,springboot框架提供了@Async注解,帮助我们更方便的将业务逻辑提交到线程池中异步执行,今天我们就来实战体验这个线程池服务: 本 ...

  5. asp.net mvc areas

    http://www.codeproject.com/Articles/714356/Areas-in-ASP-NET-MVC

  6. 【Nodejs】ExpressのRequestとResponseの内容

    Request 对象 - request 对象表示 HTTP 请求,包含了请求查询字符串,参数,内容,HTTP 头部等属性.常见属性有: req.app:当callback为外部文件时,用req.ap ...

  7. Python memoryview() 函数

    Python memoryview() 函数  Python 内置函数 描述 memoryview() 函数返回给定参数的内存查看对象(Momory view). 所谓内存查看对象,是指对支持缓冲区协 ...

  8. 调用高德地图API(热力图)详解

    具体脚本语言如下: <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  9. (mysql数据库报错)The user specified as a definer ('root'@'%') does not exist

    权限问题,授权 给 root  所有sql 权限 解决办法: (1)登录MYSQL 以管理员身份运行cmd      >mysql -u root -p      >密码 (2)更改权限 ...

  10. axios介绍

    原文地址:lewis1990@amoy axios 基于promise用于浏览器和node.js的http客户端 特点 支持浏览器和node.js 支持promise 能拦截请求和响应 能转换请求和响 ...