flexible | 易学教程

使用Flexible实现手淘H5页面的终端适配的注意事项

阅读更多关于使用Flexible实现手淘H5页面的终端适配的注意事项

具体思路，请参考大漠的原文，此处仅提供部分源码注意事项。 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-touch-fullscreen"> <meta content="telephone=no,email=no" name="format-detection"> <script src="./javascript/flexible_css.debug.js"></script> <script src="./javascript/flexible.debug.js"></script> <title>再来一波DEMO</title> <link rel="stylesheet" href="../dist/tmall_goods.css"/> </head> <body> <div> <div> <h2><img src="http://gw.alicdn.com/mt/TB1PNLZKXXXXXaTXXXXXXXXXXXX-750-481.jpg" alt=""></h2> </div> <ul> <li> <a class=

移动端rem flexible方案

阅读更多关于移动端rem flexible方案

移动端rem flexible方案一、px 自动转换为rem sublim Text3 下载本项目，比如：git clone https://github.com/flashlizi/cssrem 进入packages目录(在Sublime安装目录下找文件夹)：Sublime Text -> Preferences -> Browse Packages... 复制下载的cssrem目录到刚才的packges目录里。重启Sublime Text。二、sublim Text 配置参数参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem->Settings-User，输入如下代码 { 　　"px_to_rem": 40, //px转rem的单位比例，默认为40 "max_rem_fraction_length": 6, //px转rem的小数部分的最大长度。默认为6。　　 "available_file_types": [".css", ".less", ".sass",".html"] 　　 //启用此插件的文件类型。默认为：[".css", ".less", ".sass"] 　　} 三、下载flexible，并在头部引入 <script src="js/flexible_css.debug.js"

自适应布局的解决方案

阅读更多关于自适应布局的解决方案

曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论—— 手淘的H5页面是如何实现多终端的适配？那么趁此 Amfe阿里无线前端团队双11技术连载之际，用一个实战案例来告诉大家，手淘的H5页面是如何实现多终端适配的，希望这篇文章对大家在Mobile的世界中能过得更轻松。目标拿一个双11的Mobile页面来做案例，比如你实现一个类似下图的一个H5页面：目标很清晰，就是做一个这样的H5页面。 DEMO 请用手机扫下面的二维码痛点虽然H5的页面与PC的Web页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。看看下图你就会知道，这是多么痛苦的一件事情：点击这里查看更多终端设备的参数。再来看看手淘H5要适配的终端设备数据：看到这些数据，是否死的心都有了，或者说为此捏了一把汗出来。手淘团队适配协作模式早期移动端开发，对于终端设备适配问题只属于Android系列，只不过很多设计师常常忽略Android适配问题，只出一套iOS平台设计稿。但随着iPhone6，iPhone6+的出现，从此终端适配问题不再是Android系列了，也从这个时候让移动端适配全面进入到“杂屏”时代。上图来自于

手淘适配-flexible

阅读更多关于手淘适配-flexible

目标拿一个双11的Mobile页面来做案例，比如你实现一个类似下图的一个H5页面：目标很清晰，就是做一个这样的H5页面。痛点虽然H5的页面与PC的Web页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。看看下图你就会知道，这是多么痛苦的一件事情：再来看看手淘H5要适配的终端设备数据：看到这些数据，是否死的心都有了，或者说为此捏了一把汗出来。手淘团队适配协作模式早期移动端开发，对于终端设备适配问题只属于Android系列，只不过很多设计师常常忽略Android适配问题，只出一套iOS平台设计稿。但随着iPhone6，iPhone6+的出现，从此终端适配问题不再是Android系列了，也从这个时候让移动端适配全面进入到“杂屏”时代。上图来自于 paintcodeapp.com 为了应对这多么的终端设备，设计师和前端开发之间又应该采用什么协作模式？或许大家对此也非常感兴趣。而整个手淘设计师和前端开发的适配协作基本思路是：选择一种尺寸作为设计和开发基准定义一套适配规则，自动适配剩下的两种尺寸(其实不仅这两种，你懂的) 特殊适配效果给出设计效果还是上一张图吧，因为一图胜过千言万语：在此也不做更多的阐述。在手淘的设计师和前端开发协作过程中：手淘设计师常选择iPhone6作为基准设计尺寸，交付给前端的设计尺寸是按 750px *

07.20 html5的适配flexible

阅读更多关于 07.20 html5的适配flexible

< script src= "http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"> </ script> <html lang="en"> <head> <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-touch-fullscreen"> <meta content="telephone=no,email=no" name="format-detection"> <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> <link rel="apple-touch-icon" href="favicon.png"> <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon"> <title>再来一波</title> </head> <body>  </body> </html> 来源：

使用Flexible 实现手淘H5 页面的终端适配学习

阅读更多关于使用Flexible 实现手淘H5 页面的终端适配学习

Amfe阿里无线前端团队双11技术连载之际,一个实战案例来展示多终端适配. Device metrics 1.0 mdpi 2.0 xhdpi 3.0xxhdpi(iphone 6 plus) 手淘h5要试配的终端设备数据只出一套IOS平台设计稿，但随着iphone 6 iphone6+的出现，从此终端tdsgukjg已不再是ANdroid系列了，ipo iphone 6 750*1134 iphone 6 plus 414*736 设计师和前端开发之间又应彩什么协作模式？选择一种尺寸作为设计和开发基准定义一套适配规则，自动适配剩下的两种尺寸（你懂的）特殊配适效果给出设计效果。手淘设计师常选择iphone6 作为基准设计交互给前端的是750*1334 自动适配到其它规则前端开发完成终端适配方案 flexible 方案视窗viewport viewport 严格等于浏览器的窗口，有点复杂移动端的viewport太窄，为了能更好为css布避服务，两个view port viewportvisualviewport和布局的 viewportlayoutviewport 虚拟，布局这两个概念 ppk 写的相关教程物理像素设备像素物理部件颜色和亮度，微小距离设备独立像素（density-independent pixel）密度无关像素，一个点，

mac nginx+ 手机查看本地网站+移动端自动rem

阅读更多关于 mac nginx+ 手机查看本地网站+移动端自动rem

https://www.cnblogs.com/tandaxia/p/8810648.html com+shift+G /usr/local location / { root /Users/chenliangfeng/Desktop/贤晟/EqichengV2/Miezz.Eqicheng.Sys/wwwroot; #文件地址 index index.html index.htm; # 文件主目录 proxy_pass https://v2.xsxxjs.com:444; # 后端接口 IP:port 切换代理 } 实习的时候用cors 后来用vue的自带功能现在用nginx完美解决顺便学了nginx 学了四个小时其实用过一遍还是很好用的首先查看本地的ip地址 ifconfig mac是这样看的然后将在同一个网络下将localhost换成ip 比如：我这次看的是 92.168.1.15 原先 http://localhost:8008/#/login 转换 http://192.168.1.15:8008/#/ login 首先安装 postcss-pxtorem npm install postcss-pxtorem -D 在postcss.config.js下增加配置 module.exports = { plugins: { 'autoprefixer': {

flexible 移动端适配

阅读更多关于 flexible 移动端适配

一、安装lib-flexible 一、安装lib-flexible 二、在项目入口文件main.js中引入lib-flexible import 'lib-flexible' 三、在项目根目录的index.html 头部加入手机端适配的meta的代码 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 四、安装px2rem-loader npm install px2rem-loader 五、配置px2rem-loader 在项目目录build/untils.js中找到cssLoaders 六、重启项目单位px在浏览器中变成rem，不变化成rem：单位后面加上/*px*/，不变化像素大小：加上/*no*/ 来源： https://www.cnblogs.com/hDanny/p/8466156.html

移动端适配，引入lib-flexible,vue开发中将px转化为rem

阅读更多关于移动端适配，引入lib-flexible,vue开发中将px转化为rem

一、下载lib-flexible npm install lib-flexible --save 二、引入lib-flexible 　　在main.js中引入 import 'lib-flexible/flexible' 三、设置meta标签　　设置设备宽度以及缩放比例等 <meta name='viewport' content='width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no'> 四、安装px2rem-loader npm install px2rem-loader --save-dev 五、配置px2rem-loader 　　在build文件中的util.js，将px2rem-loader添加到cssLoaders中(中间是添加的内容) const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap } } // 这里是添加的内容,配置rem适配 const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 } } const postcssLoader = { loader: 'postcss

ubuntu conda install xxx 出现问题

阅读更多关于 ubuntu conda install xxx 出现问题

Solving environment: failed with initial frozen solve. Retrying with flexible solve. 这是出现的问题，然后无法安装这是错误结果解决方法：依次输入以下程序 conda config --add channels conda-forge conda config --set channel_priority flexible 然后在执行自己的安装命令即可亲测有效来源： CSDN 作者： myh12138 链接： https://blog.csdn.net/myh12138/article/details/103973159

订阅 flexible