作用:可以使用媒体查询, 根据不同的视口宽度, 设置不同的根字号。...(*假定设计稿适配375px视口) 理解:设备宽度为 375px,则基准跟字号为 37.5px,rem值=68/37.5 公式: N*37.5=68 → N=68/37.5 flexible.js 可以使用...flexible.js配合rem实现在不同宽度的设备中,网页元素尺寸等比缩放效果。...flexible_css.js,flexible.js"> less语法 使用less语法快速编译生成css代码。 less语法是一个CSS预处理器,less文件后缀是.less。...注:&表示当前选择器,不生成后代选择器,通常配合伪类或伪元素使用。 变量:存储数据,方便使用和修改。
} else { dpr = 1; } } else { // 其他设备下,仍旧使用...1倍的方案 // dpr = 1; // 其他设备下,改为使用设备当前的dpr dpr = devicePixelRatio;
按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小; (2)CSS中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值; 技术方案1 技术方案2 媒体查询 flexible.js...rem rem less vscode插件cssrem 总结:两种方案都可以,一般推荐第二种方案,更简单操作 二、简洁高效的rem配方案flexible.js 原理 手机淘宝团队出的简洁高效移动端适配库...px) / (屏幕宽度/划分的份数)) ②屏幕宽度/划分的份数就是html的 font-size的大小 ③或者:页面元素的rem值=页面元素值(px) / html font-size字体大小 三、使用步骤...技术选型案例 方案:我们采取单独制作移动页面方案· 技术:布局采取rem适配布局 ( flexible.js + rem ) 设计图:本设计图采用750px设计尺寸 1.下载flexible.js github...4.初始化style /* 如果屏幕超过了750px,那么我们就就按照750px设计稿来走,不会让页面超过750px ,使用媒体查询来设置*/ @media screen and
的屏幕宽度为375px 所以设置基准rem = 375 /10 =37.5 为啥/10,这个无所谓,只是一个自定义规定,为了让根px不要那么大 除了设置html根元素上的font-size之外,还要配合flexible.js...使用 什么是flexible.js?...}(window, document)) 参考:http://dwbbb.com/blog/flexible/ https://www.jianshu.com/p/3a07024963d9 其实flexible.js
flexible是阿里团队开源的一个js库,使用flexible.js可以轻松搞定各种不同的移动端设备兼容自适应问题。...但是最近有朋友使用flexible.js插件,但是不管切换什么设备,data-dpr的值始终为1。 ?...标签,当默认自己设定了viewport,initial-scale="1",等等之后,相当于默认设置了dpr=1,或者name="flexible"下设置默认的 initial-dpr=1等默认值,这样flexible.js
忘记是哪个大神的文章提到过,lib-flexible有一些问题,建议使用viewport,今天使用一下viewport。...先使用rem,之前用的是淘宝的flexible.js,会帮你动态的根据屏幕大小计算html的font-size。...我去看了之前的项目和淘宝,根据750的设计稿,使用flexible.js的在屏幕556px之后html的font-size最大是54px,移动端的时候540之后html的font-size最大也是54px...的效果,就不需要使用flexible.js了。...我对比了用flexible.js的项目,和这样使用,html的font-size是一模一样。只不过这样使用还需要单位换算插件。
(min-width:640px)"> 当屏幕大于320px的时候引入320.css当屏幕尺寸大于640px的时候引入的是640css rem适配方案 一、 css预处理语言 媒体查询 rem 二、 flexible.js...font-szie就等于 屏幕宽度/划分的份数 也就是 页面元素的rem指=页面元素px指/html的标准font-size(这里的标准是指以哪个尺寸的设计稿算出来的font-size值) rem配合 flexible.js...使用第一种方式有点麻烦 如下代码 很多媒体查询 /* 设置常见屏幕尺寸,修改html文字大小*/ //320 /*划分份数为15*/ @num:15; /*限定html大小 (pc打开直接50px)*...750设计稿被分成10分那么html的font-size = 75px 也就是我们每个元素的高宽都要除下75 ,还是有点麻烦,之前我们用less还可以实现自动计算,现在确要我们手动计算了 不急如果你使用...如下 图片 搜索cssrem,箭头的方向就是我们html的font-size大小 图片 最后将vscode重启即可 到这里还没有完,我们要在css定义一个最大的宽度,当屏幕宽度超过设计稿时,就使用设计稿的宽度
rem 认识 优点: 可以适应不同大小的屏幕 使用px或者百分比布局不能实现: px单位时绝对单位 百分比布局是宽度自适应,高度固定的 rem使用 rem使用时需要配合: 媒体查询 flexible.js...(推荐使用⭐) rem 单位 相对单位 相对于HTML标签的字号计算结果 1 rem = 1 HTML字号大小 媒体查询 作用 能够检测视口宽度,根据不同的视口宽度设置不同的html字号大小 HTML.../js/flexible.js">
我认为解决retina屏问题的可行方案是: 1)在devicePixelRatio<=2时,图片统一使用750设计稿的切图 2)在devicePixelRatio>=2时,图片统一使用750*1.5=1125...引入flexible.js 这一步其实非常简单,只要把https://github.com/amfe/lib-flexible源码里flexible.js的内容复制出来,在本地新建一个flexible.js...注:使用lib-flexible,通常不要写: 交给flexible.js自动处理。...注: 1) 由于使用了grunt构建,所以需要先安装node ,git,再通过npm安装grunt 和bower 2)考虑到将来可能要做全屏滚动的效果,所以这页面一开始就是用fullpage.js来做的
flex-direction 改变元素排列方向 row 改成x 默认值 column 改成y 移动适配 移动适配使用的两种类型的单位,rem和vw/vh。...rem 是一个相对单位,1rem为1html字号大小 rem使用 使用媒体查询设置差异化CSS样式 @media (媒体查询) { 选择器 { 属性...视口高度 vw的好处自动是视口宽度的1/100 自动计算不需要在引入额外js,不过又移动兼容性问题 设计稿一般是375px,1vw就是3.75px flexible 移动设备视口宽度很多,我们不能一个一个使用媒体查询...,我们使用flexible配合rem使用 flexible.js是手淘开发出的一个用来适配移动端的js框架。...在body结束标签上门引入flexible.js 项目地址 https://github.com/amfe/lib-flexible
依赖 项目基础配置使用 vue-cli2 生成 自适应方案核心: 阿里可伸缩布局方案 lib-flexible px转rem:px2rem,它有webpack的loader px2rem 开始 先使用...(我这里全局搜索了54找到flexible.js文件) 找到flexible.js文件看下: 找到问题了就解决问题,既然文件把屏幕宽度写死了,那就不写死: function refreshRem
###手机H5页面 ###文字滚动 使用li标签,通过改变margin-top实现向上滚动。...span> 男 35 ###手机页面适配各种屏幕 使用手淘团队的...9259ca14/flexible.js"> </script
在项目中安装lib-flexible npm install lib-flexible --save 第二步 在main.js中引入lib-flexible import 'lib-flexible/flexible.js...-- --> 第四步 安装px2rem-loader 使用px2rem-loader
[New]Vue项目使用vw实现移动端适配教程 2018年1月25日 11:58:01 最新的大漠老师移动端适配方案, 使用这套方案可以取代flexible.js 首先建议读者先去学习大漠老师的这篇文章...,看完能有大大的收获 如何在Vue项目中使用vw实现移动端适配 ####正文开始 使用vue-cli新建项目 安装依赖 复制以下代码: 复制进行 postcssrc.js 配置 .postcssrc.js...配置 ###各插件的功能: postcss-px-to-viewport : 将项目中的px转化为vw 容器适配,可以使用vw 文本的适配,可以使用vw 大于1px的边框、圆角、阴影都可以使用vw 内距和外距...,可以使用vw postcss-px-to-viewport文档 postcss-write-svg 实现Retina屏1像素边框 首先记得在heade头加入 ######实例不成功,换插件实现吧 方式一
一、安装 npm install px2rem-loader lib-flexible --save 二、入口文件main.js加上 import ‘lib-flexible/flexible.js’
元素可视区 client 系列 1.1 client概述 client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。...淘宝 flexible.js 源码分析 立即执行函数 (function(){})() 或者 (function(){}()) 主要作用: 创建一个独立的作用域。...此时可以使用 pageshow事件来触发。,这个事件在页面显示时触发,无论页面是否来自缓存。
1. client概述 client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。...淘宝 flexible.js 源码分析 立即执行函数 (function(){})() 或者 (function(){}()) 主要作用: 创建一个独立的作用域。...此时可以使用 pageshow事件来触发。,这个事件在页面显示时触发,无论页面是否来自缓存。
Flexible实现手淘H5页面的终端适配,里面详细的讲解了该方案的使用和原理。...,有一些postCSS新技术的运用,但人水平有限,如果大家感兴趣,可以用作者推荐的方案代替, 二、项目中使用 1、安装 $ cnpm install lib-flexible --save ?...install 2、main.js中引入 import 'lib-flexible/flexible.js' ?...一般很多人都喜欢使用px2rem-loader,因为比起cssrem确实方便很多,但由于我在工作中基于微信做h5页面的时候会使用vux组件库,如果安装这个,需要在build/utils.js中的cssLoader...中配置,这样会导致使用vux组件变形。
表1.1展现了旧版验证码资源文件情况,从表中可以看出,旧版验证码资源使用相对混乱,尤其是js/css资源,分散的多个小文件大大增加了HTTP请求数量。...方案及技术选型 图2.1是验证码的前端框架,验证码的主要页面使用iframe加载,iframe隔离了业务页面,为验证码提供了更可控更干净的执行环境。...资源合并 模块化 DOM操作优化 资源合并打包 图片、样式内联 规范移动端适配 引入flexible.js rem自动换算 iframe内缩放问题 webview内适配问题 提升用户预期 3....移动端适配 4.1 引入flexible.js flexible.js是一个开源的用于终端设备的适配解决方案,主要用于解决各种不同尺寸移动设备的大小自适应问题,其原理是通过移动设备的dpr(设备像素比=...因此我们选择flexible.js用于验证码的页面适配,在页面引入flexible.js后,首先获取设备型号,然后根据不同设备在标签上添加一个data-dpr和font-size样式,并结合我们的项目对其进行改进
对比总结一下热门的解决方案 通过媒体查询的方式即CSS3的 @media 天猫首页使用的 flex 弹性布局 淘宝首页使用的 rem+viewport缩放(Flexible.js) hot.css --...} 优点: 移动端和PC维护使用同一套代码时,方法简单,成本低。...---- ####Flex 弹性布局 建议参考阮一峰老师的flex教程 使用display:flex;进行移动端布局 ---- ####Flexible- 使用rem+viewport进行布局 淘宝使用的方案...,根据屏幕宽度设定 rem 值,需要适配的元素都使用 rem 为单位,不需要适配的元素还是使用 px 为单位。...使用hotcss可以让移动端布局开发更容易。 谁在用hotcss: 熊猫TV 美丽说HIGO 奇虎360
领取专属 10元无门槛券
手把手带您无忧上云