更新手淘 flexible 布局 rem 单位适配问题

【更新手淘 flexible 布局 rem 单位适配问题】的更多相关文章

更新手淘 flexible 布局 rem 单位适配问题

详见链接 https://github.com/amfe/lib-flexible…

下载flexible: https://github.com/amfe/lib-flexible //未压缩版 (function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize () { if (document.body) { do…

手淘lib-flexible布局适配方案

前置知识:什么是rem CSS3新增的一个相对单位rem(root em,根em).rem是相对于根节点(或者是html节点).如果根节点设置了font-size:10px;那么font-size:1.2rem;字体大小等于12px. 前置知识:什么是dpr 在浏览器控制台中输入 window.devicePixelRatio 可以获取当前设备的dpr 那么什么是dpr? dpr就是设备物理像素与逻辑像素(css像素)的比例. 那么设备物理像素是固定的,比如macbook pro 13.3寸是显…

手淘flexible.js框架使用和源代码讲解

手淘框架是一个用来适配移动端的js框架,下面我们来讲解一下如何使用手淘的这套框架. 其实手淘框架的核心原理就是根据不同的width给网页中html跟节点设置不同的font-size,然后所有的距离大小都用rem来代替,这样就实现了不同大小的屏幕都适应相同的样式了,首先我们来说一下常用的移动设备. iphone6: 375px*667px 实际像素:750px*1334px iphone5: 320px*568px 实际像素:640px*1136px iphone4: 320p…

通过media媒体查询设置ie7/8样式、使用media判断各机型、手淘flexible.js

@media all and (min-width:1280px){ /* 所有设备宽度大于1280干嘛干嘛嘞... */ body{ background:#f00; } } @media (min-width:1280px){ /* 所有设备宽度大于1280干嘛干嘛嘞... */ body{ background:#f00; } } 其中all and可省略 @media print{ /*打印时设置的样式*/ body{ background:pink; } } 插曲: Lake Hill…

基于vue-cli配置手淘的lib-flexible + rem，实现移动端自适应

没接触过flexible的建议先看看大漠的这篇文章这样你才会知道长度为什么用rem,而字体要用px 安装flexible npm install lib-flexible --save 引入flexible 在项目入口文件main.js中添加如下代码,引入flexible import 'lib-flexible' px 转 rem 使用 webpack 的 px2rem-loader,自动将px转换为rem 安装px2rem-loader npm install px2rem-loader -…