手机端适配方案 媒体查询和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 相对长度单位 是网页设计 ...
随机推荐
- VMwear安装Centos7超详细过程
本篇文章主要介绍了VMware安装Centos7超详细过程(图文),具有一定的参考价值,感兴趣的小伙伴们可以参考一下 1.软硬件准备 软件:推荐使用VMwear,我用的是VMwear 12 镜像:Ce ...
- 11.14java课堂测试
源代码: import java.*; import java.util.*; import java.io.File; import java.io.FileInputStream; import ...
- centos7下解压bz2文件
已有python2.7.5 已有yum 1.安装bzip2 yum install -y bzip2 2.改变压缩格式 bunzip2 dlib-19.13.tar.bz2 3.解压 tar -xf ...
- Mysql 表 创建 / 删除（基础3）
创建表 语法: #进入数据库 mysql> use mydb123; Database changedmysql> select database();+------------+| d ...
- python模块部分 re模块 之正则表达式
python 全栈开发 1.什么是模块 2.正则表达式 一.什么是模块? 1.模块: 是一组功能的集合 你要和一个东西打交道,但是这个东西本身和python没有关系,这个东西本身就存在, 这时,pyt ...
- Hibernate框架学习笔记
Hibernate 是一个 JDO( Java Data Objects)工具.它的工作原理是通过文件把值对象(Java对象)和 数据库表之间建立起一个映射关系,还提供数据查询和获取数据的方法. ...
- Cisco & H3C 交换机 DHCP 中继
个人理解:其实在核心交换上配置dhcp 中继也就是短短的几条命令,主要是注意细节,具体配置如下,希望能帮到大家: DHCP服务器IP:192.168.1.100 CISCO: 第一步:开启交换机的dh ...
- int 和 Integer 的区别
1.两个New生成的Integer 永远不相等,因为他们的内存地址不相等 2.如果一个是New生成的Integer 另一个是通过赋值生成的话,如果值相等那么他们相等,因为这时Integer会通过自动拆 ...
- leecode 978. Longest Turbulent Subarray(最长连续波动序列，DP or 滚动数组)
传送门:点我 978. Longest Turbulent Subarray A subarray A[i], A[i+1], ..., A[j] of A is said to be turbule ...
- Linux 有线 校园网
1.首先在ifconfig命令在终端查看自己的ip地址,然后记录下来 2.然后用sudo -i 命令转换到root权限下 3.在自己家目录下输入pppoeconf 4.遇到username时,讲自己的 ...