http://isux.tencent.com/responsive-web-design.html http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 响应式网页设计(响应式设计的涉及到的知识点) http://blog.csdn.net/hacke2/article/details/41309835 响应式Web初级入门 http://blog.csdn.net/hacke2/article/details/45276721 移动Web初级入门 http://segmentfault.com/a/1190000003690140 关于移动端 rem 布局的一些总结 http://mobile.51cto.com/web-481943.htm 淘宝做法以及源代码github仓库。 ====》按部就班写法，将px等比换算为rem，100整除。开发方法与PC类似仅仅改变计量单位而已。设计出两个效果图矢量图设计750和1125px。 http://www.cocoachina.com/webapp/20150715/12585.html 解惑好文：移动端H5页面高清多屏适配方案 （DPR概念图形学原理深入解释剖析。） 普通屏幕 dpr=1 etina屏幕 dpr=2 iPhone3gs(dpr=1)和iPhone5(dpr=2) 移动端H5开发，在不同分辨率，不同屏幕手机下会遇到的几个经典问题。 retina下，图片高清问题 retina下，border: 1px问题 rem = document.documentElement.clientWidth * dpr / 10 http://www.cnblogs.com/lyzg/p/4877277.html%201.2rem 从网易与淘宝的font-size思考前端设计稿与工作流 （借鉴网易模式进行尺寸rem自适应100整除之） http://3g.163.com/ 网易移动端首页参考设计 http://www.w3cplus.com/css/css-font-sizing.html http://ued.taobao.org/blog/2013/05/rem-font-size/ 响应式十日谈第一日：使用 rem 设置文字大小 http://www.cnblogs.com/xjchenhao/p/4310585.html http://mobile.51cto.com/web-485990.htm H5移动前端完美布局之－margin百分比的使用 http://taobaofed.org/blog/2015/10/28/auto-layout-in-h5-project/ 还好有kimi(淘宝前端团队针对移动端H5开发提供的整体解决方案)。 无线kimi项目依赖于m-base, m-base通过设定根元素的rem，即通过HTML根元素相对长度单位来定义一个相对的基准单位，为什么说是相对的呢？因为这个基准单位的值在不同分辨率下是不同的。所以可能从m-base上能找到线索。 那么m-base的这个HTML根元素的font-size到底是如何计算出来的呢。 m-base从1.0.0开始，前端对rem的基准处理统一约定为：viewport/10，也等价于vw单位，后续的rem规范基准都以屏宽十分之一为准，和手淘首页新标准、天猫均保持一致。 也就是说，我们规定了（篇幅有限，这里只贴出部分规范） 1rem = viewport / 10; 750的设计稿，1rem = 75px; 1px = 1/75 rem; 200px = 200 / 75 = 2.666666667rem; 640的设计稿，1rem = 64px; 1px = 1/64 rem; 200px = 200 / 64 = 3.125rem; 参照iphone6效果图像素：750x1334 scss写布局。 切图放大1.5倍，1125。 方案4 less实现（暂不考虑，迁移成本太高=》只适合做组件！高级前端开发使用。） http://www.oschina.net/question/12_44255?sort=default&p=4 为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus less方案选型（响应式问题彻底解决最终方案是CSS预处理的解决方案！） 首先我们来简单介绍下什么是 CSS 预处理器，CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧， 方案选型：SASS http://www.ruanyifeng.com/blog/2012/06/sass.html http://www.w3cplus.com/sassguide/syntax.html http://sass.bootcss.com/ http://www.sasschina.com/ 教程 https://github.com/sass/sass 源码 http://www.2cto.com/kf/201504/390776.html http://www.th7.cn/web/html-css/201311/14988.shtml http://www.th7.cn/web/html-css/201512/139592.shtml https://www.jetbrains.com/phpstorm/help/transpiling-sass-less-and-scss-to-css.html phpstorm中集成sass windows上安装ruby编译器教程=》phpstorm配置实时编译sass到css =》前端直接使用编译后的CSS文件。 规范M站和APP的页面设计规范，统一CSS使用SASS写法，重写CSSLIB库。 研究两篇文章。 CSS的组件化响应式 =》SASS方案 =》整个工程可以打包合并为一个CSS文件。（架构的CSS目录结构需要进行调整） JS组件化模块化方案？=》requirejs （优于seajs）（JS打包合并压缩工具？） gulp、webpack 百度前端的打包工具、去哪儿的打包工具。 * emsjs v1.3.3 * 作者：侯锋 * 邮箱：admin@xhou.net * 网站：http://houfeng.net , http://houfeng.net/ems * emsjs 是一个符合 AMD 规范的浏览器端 JavaScript 模块加载器，兼容主流浏览器。 http://ask.dcloud.net.cn/article/414 hbuilder的前端开发架构规范案例 mui 作为一个 UI 框架，并未对 “开发模式、构建方式、模块化方案” 等做出任何限制，当然，每一个开发者或 team 都可以采用熟悉且合适项目的 “库、框架、工具” 去开展开发工作。 在这个 App 模板中: 使用 Gulp 作为构建工具 使用 AMD 模块组织代码 使用 MVVM 进行双向绑定 https://github.com/tkvern/autostrap (viewport scale => iphone4 320w) 基于原生JS移动端响应式解决方案——AUTOSTRAP 介绍 就目前移动端而言，已有比较成熟都响应式框架，类似于Bootstrap、AmazeUI、Skeljs。但是对于普通开发者来说，为了满足快速开发的需求去学习和使用这些框架的时间成本是比较高的。所以，本着轻量、快速开发的原则，为大家提供了基于原生JS的移动动端解决方案，希望能在交流、使用中继续优化AutoStrap。 原理 目前我们熟悉的开源前端框架都是栅格化布局，通过mediaQuery，在不同分辨率加载不同的css到达响应式的效果。同时还提供了诸多的JS组件供开发者使用。而AutoStrap是使用viewport，以iPhone4分辨率为模板，根据可视宽高调节缩放比例实现。具体内容下面的代码会给出。 ==========================（viewport依赖target-densitydpi属性被webkit废弃） https://lists.webkit.org/pipermail/webkit-dev/2012-June/020914.html There's some concern that target-densitydpi is used by some apps that are bundled with Android, but folks appear willing to deprecate the feature and to migrate those apps to using other mechanisms, such as responsive images and CSS device units. 此方案实验存在问题总结： 1.MUI的幻灯片显示不正常。 2.会出现一次拉伸闪烁效果比较差。 3.部分页面缩放后布局会出现错乱。 http://www.cnblogs.com/PeunZhang/p/4517864.html https://github.com/peunzhang/pageResponse (按照高清大图750*1.5=1125的px编辑=》计算deviceWidth=》onload与onresize对指定的select的html容器进行CSS3的等比缩放处理。) pageResponse - 让H5适配移动设备全家(移动端适配) （用原始图进行缩放处理自适应问题） 使用transform:scale缩放页面，要求视觉稿高清 页面以px为单位即可让h5适配各种移动设备，适配原则根据视觉稿比例缩放页面 告别rem、媒体查询、百分比等相对复杂且定位不精准的布局 兼容性良好，支持ios4+、android2.3+、winphone8+系统 约1k，零依赖 三种适配模式可选 auto || contain || cover 1080x1920 iphone6s http://www.daqianduan.com/6223.html https://www.zfanw.com/blog/srcset-and-sizes.html 图片自适应方案srcset http://less.bootcss.com/ less方案 http://codeboxr.com/blogs/how-to-use-less-in-phpstorm phpstorm配置编辑less http://www.cocoachina.com/webapp/20150716/12621.html 移动Web开发规范概述 http://blog.jobbole.com/25114/ @拔赤：前端开发十日谈（前端开发经验系统总结，前端架构师成长过程） http://www.v5site.com/archives/120 移动端网站优化点 http://www.seozixuewang.com/post/2683.html 移动端网站SEO