手机端适配方案 媒体查询和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 相对长度单位 是网页设计 ...
随机推荐
- HTML 设置字体
HTML,CSS,font-family:中文字体的英文名称 (宋体 微软雅黑) 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsof ...
- 《java与模式》阅读笔记01
这次我读了前两章的内容,就如书名所言,这本书主要将的就是java中的模式,在书中的序言就把所有的模式都介绍了一下,主要有, 1.创建模式:简单工厂模式,工厂方法模式,抽象工厂模式,建造模式 2.行为模 ...
- 二、Adapter 适配器
适配器:继承适配与委托适配 需求:Banner 可以输出强电流380v.弱电流12v,但是不能被直接使用.通过别的方式,介间的使用banner? 委托类图: 代码清单: 需要隐藏的功能类: publi ...
- 【scrapy】其他问题
今天看<python爬虫开发与项目实践>的17章写代码的时候发现,一个方法的结尾带了红色波浪线: def _process_booklist_item(self,item): ''' 处理 ...
- Python十分适合用来开发网页爬虫
Python十分适合用来开发网页爬虫,理由如下:1.抓取网页自身的接口比较与其他静态编程语言,如java,c#,c++,python抓取网页文档的接口更简练:比较其他动态脚本语言,如perl,shel ...
- 15种css居中方式
1 水平居中 1.1 内联元素水平居中 利用 text-align: center 可以实现在块级元素内部的内联元素水平居中.此方法对内联元素(inline), 内联块(inline-block), ...
- Ant 之 Task
Ant提供了大量的核心task和可选task,除此之外,Ant还允许用户定义自己的task,这大大扩展了Ant的功能.本书由于篇幅关系,所以不可能详细介绍Ant所有的核心task和可选task,本书将 ...
- docker容器和镜像
这篇文章希望能够帮助读者深入理解Docker的命令,还有容器(container)和镜像(image)之间的区别,并深入探讨容器和运行中的容器之间的区别. 当我对Docker技术还是一知半解的时候,我 ...
- HDU-1212.BigNumber(有关模数的定理)
本题大意:给出一个1000位以内的大数和一个小数,让你计算并给出大数对小数取余的结果. 本题思路:由下面的公式可以推出本题的计算公式,套入即可解决,建议自己把这个公式推一下,很简单的... 参考代码: ...
- React 入门实例教程【转】
Any day will do. 哪一天都行 Are you kidding? 你在开玩笑吧! Congratulations! 祝贺你! I don’t mean it. 我不是故意的. 原文作者: ...