1.下载lib-flexible 使用的是vue-cli+webpack,通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible/flexible' 3.设置meta标签 通过meta标签,设置设备宽度以及缩放比例 <meta name="viewport" content="width=device-width, initial-

背景 旧的rem适配方案(无论是直接使用rem,还是配合flexiblejs等lib库进行视口缩放)已经疲态尽显,且随着安卓高清屏的不断出现,同时data-dpr仍有进一步增加的可能性,rem显得并不是那么稳固与称心如意. 首先截止至发文日期,viewport的兼容性如下: 可以看到,viewport的兼容性支持已经变得非常好,因此有机会抛弃一切外接库,直接使用原生的viewport.就像最早使用sublime到现在的vscode,都需要重新配置插件px2rem, 换了编辑器,换了环境,开发就会

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目

原文链接 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5

目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目标很清晰,就是做一个这样的H5页面. 痛点 虽然H5的页面与PC的Web页面相比简单了不少,但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备.看看下图你就会知道,这是多么痛苦的一件事情: 再来看看手淘H5要适配的终端设备数据: 看到这些数据,是否死的心都有了,或者说为此捏了一把汗出来. 手淘团队适配协作模式 早期移动端开发,对于终端设备适配问题只属于Android系列,只不过很多设计师常常忽略An

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目

这是H5项目完成后的一些整理,有些理解不能非常准确,希望大家能帮忙指出. 移动端的适配 一些名词解释 visual viewport 可视视图 layout viewport 布局视图 vm 可视视图的宽度,最大为100.类似一个百分比的值 vh 可视视图的高度 points 独立像素点.抽象的单位,在数学的坐标空间才有意义 dpr = 物理像素/独立像素点. display zoom 在苹果设置中显示有 标准和 放大. rendered Pixels = points*dpr physical

最近看了下gulp4.0的升级,感觉和3.0相比变化还是比较大的,很多3.0的写法和插件会出现一些莫名其妙的变化,详细的变化就先不说了,这里我直接把我配置好的代码拿过来吧,方便各位可以更好的学习和使用(下面代码经过本人尝试,可以正确无误的运行) gulp4.0 github源码 1,目录结构 app下面的文件夹就不用多介绍了吧,都是存放的一些基本的静态资源,这里着重说下为啥会多了一个tpl文件夹. 之所以单独列出一个tpl文件夹其实是为了使用gulp-file-include,里面其实存放的是一

我们在处理网页的时候,往往会遇到兼容性的问题.在这个问题上分为两个大的方向:屏幕自适应&浏览器兼容.而屏幕自使用的方法有许多,包括框架之类的,但是浏览器的兼容却没有一个号的框架.在我们日常处理中,会使用属性兼容(*background,_background...),前缀兼容(-webkot-,-oz-,-o-...)以及注释兼容([if it ie...]).方法啊很多,但是我们却要挨个去加这些属性,难免会拖慢我们的效率.这样的情况下,PostCSS应运而生.那开始我们的学习之旅吧: 一:准备

1.安装 npm install postcss-pxtorem --save 2.找到postcss.config.js 默认是这样 module.exports = { "plugins": { "autoprefixer": {}, } } 修改成这样 module.exports = { "plugins": { "autoprefixer": { browsers: ['Android >= 4.0', 'iO

公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible.px2rem实现移动端适配的方案,开发过程中也遇到一些坑,自己选的方案自己填坑吧.以下记录我的项目框架搭建及填坑方案. 搭建可以参考我的另一篇文章vue-cli 3.0 搭建项目流程,这里就不再另外说明了.下面说明项目搭建成功后的适配方案. 第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible

Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下: .row { @include display-flex; } 会得到如下代码: .row { display: -webkit-flex; display: flex; } 但是, 做为一个长期用原生CSS书写方式的CSSer,不太习惯去官方查文档,再以@include方式书写. 那么问题来了,我只能放弃高效率方式么? 其实不然, Aut

PostCSS介绍 原文链接:http://www.smashingmagazine.com/2015/12/introduction-to-postcss/ 转自:http://www.zcfy.cc/article/81 CSS的发展与所有语言的发展一样,都有一个迭代的过程.伴随着每一个主要版本的发布,我们都可以获得新的特性和语法帮忙我们更好的完成样式.CSS3 介绍了很多新的特性,可以让我们设计交互,之前我们都是通过javascript来实现交互.每一天都会有新工具出现,让我们可以更灵活地

准备 构建工具为Gulp基于PostCSSPostCSS插件 CSSNext 用下一代CSS书写方式兼容现在浏览器PostCSS插件 Autoprefixer 为CSS补全浏览器前缀PostCSS插件 CSS Grace 让CSS兼容旧版IE package.json "devDependencies": { "autoprefixer": "^7.1.1", "browser-sync": "^2.18.8&quo

CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W3C推出了第一个正式版本.随后不到两年的时间,1998年5月便推出了第二个版本,一直沿用至今.但是CSS3的制订工作却迟迟没有完成.CSS3最初的草案在1999年便被提出,但是直到今日CSS3规范仍然有部分特性没有完成.如果说ES6与ES5相隔的6年时间让开发者们熬尽了心肝,那么从提案到发布相隔近2

1.在webpack中需要处理css必须先安装如下两个loader npm install --save-dev css-loader style-loader 2.要处理sass和添加浏览器前缀需要下载如下插件和loader //sass-loader依赖于node-sass,所以还要安装node-sass//postcss-loader autoprefixer postcss 处理浏览器兼容 npm install --save-dev sass-loader node-sass post

我是经过公司另外一个同事推荐的这个 他是一个资深的大哥哥  我觉得我确实需要跟多的学习和成长 而且我觉得我应该听他的话 多学学新知识 最近一直在做适配的网站 会出现很多媒体查询 我发现用这个写媒体查询 会很方面开发 能很大的提升开发速度 于是我今天特意来公司 (在家里没有学习的心思 就只想吃东西 但是我今天在公司还是吃了很多零食 ) 我费了九牛二虎之力还是没有弄好  于是乎我开始弄less 发现很好弄 但是我还是不想死心 就在我心灰意冷的时候发现了一篇文章 虽然我也好复制 但是还是要把原作地址写

webpack使用postcss的autoprefixer插件,并在压缩css时使用了cssnano,处理不当的情况下会导致压缩css后,部分兼容前缀(比如-webkit-)被删除的问题. postcss的autoprefixer配置如下: autoprefixer({ browsers: ['> 1%', 'iOS >= 7',"ie >= 7", 'Android >= 2.4'] }) css压缩的配置如下: //压缩css代码 new OptimizeC

背景 在项目使用lib-flexible还有postcss-px2rem实现移动端适配,当我们引入第三方的样式组件库,发现一个问题.那些组件库的样式都变小了. 问题原因 变小的主要原因是第三库 css一依据 data-dpr="1" 时写的尺寸 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.