手机端适配方案 媒体查询和flexbale
方法一 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 适配
手机端适配方案 媒体查询和flexbale的更多相关文章
- 关于手机端适配的问题（rem，页面缩放）
关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...
- h5 手机端适配问题汇总
1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器 能识别 a标签中href的 javascript:; 为网址 , 55555 3.safari 的弹框如 ...
- 手机端适配iPhoneX
iPhoneX取消了物理按键,改成底部小黑条,这一改动导致网页出现比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常 ...
- 移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析
以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEv ...
- rem手机端适配
<script> document.documentElement.style.fontSize=document.documentElement.clientWidth*100/750+ ...
- 手机端适配rem代码片段
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端 rem单位做适配的 媒体查询节点
@media screen and (min-width:300px){html,body,input{font-size:15px}}@media screen and (min-width:320 ...
- Web移动前端开发-——rem+less+媒体查询，rem+flexble.js+媒体查询
实际开发搞搞起来!!!! rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值 页面re ...
- iPhone X适配方案
iPhone X适配方案 https://github.com/Wscats/iPhone-X 绝对长度单位 英寸 厘米 毫米 磅 pc inch cm mm pt pica 相对长度单位 是网页设计 ...
随机推荐
- Java中String的intern方法，javap&cfr.jar反编译，javap反编译后二进制指令代码详解，Java8常量池的位置
一个例子 public class TestString{ public static void main(String[] args){ String a = "a"; Stri ...
- Numpy知识（三）
ndarray的花式索引. 正负数索引,正数就是从0开始的下标正向寻找,负数是-1开始的负向寻找. arr[[1,5,2,6],[0,3,1,2]]:拿取arr[1,0],arr[5,3],arr[2 ...
- python list 常用
l = [,,,] b = [,,] l.remove() #val del l[] #key new_list = l.extend(b) #[,,,,,,] new_list = l.append ...
- Dubbo -- Simple Monitor
一.简介 dubbo-monitor-simple是dubbo提供的简单监控中心,可以用来显示接口暴露,注册情况,也可以看接口的调用明细,调用时间等. Simple Monitor挂掉不会影响到Con ...
- Java字节流Stream的使用，创建方法
首先:FileOutputStream写入数据文件 学习父类的方法 使用子类的对象 步骤: 1:子类中的构造方法 作用 :绑定输出的目的地 FileOutputStream fos= new F ...
- Java volatile关键字的用法
volatile不能解决同步问题 如果想要理解volatile关键字的作用不得不先了解Java内存模型 摘抄一下来自百度百科的话 在本次线程内,当读取一个变量时,为提高存取速度,编译器优化时有时会先把 ...
- RecyclerView的单击和长按事件（转）
转自:http://www.jianshu.com/p/f2e0463e5aef 前言 上一篇文章揭开RecyclerView的神秘面纱(一):RecyclerView的基本使用中,主要讲述了Recy ...
- ubuntu 印象笔记
1. 印象笔记剪裁,直接浏览器上百度搜索,下载浏览器插件,登陆即可.(不过,我遇到个问题,浏览器登陆的服务器貌似是国际版的,与pc上的服务器不同,也没有成功转换过来.两账户相互独立.) 2. 印象笔记 ...
- <asp:Button点击查询后，调用js中函数展现加载圈
<div> <div id='paneloading' style='display:none;position:fixed;top:0px;left:0px;z-index:999 ...
- vue 给v-html中的元素设置样式
解决方案:写样式的时候添加>>>