摘要：
移动端网页应用开发及项目 移动开发基础 流式布局-京东项目 flex布局 携程网首页 rem布局 + 媒体查询 + Less + flexible 苏宁首页 响应式布局+Bootstrap 阿里百秀 开发总结 移动端技术选型 流式布局（百分比布局） flex弹性布局（推荐） rem适配布局（推荐） 阅读全文
摘要：
阿里百秀 一、准备工作 1.1 技术选型 方案：响应式布局页面开发方案 技术：bootstrap框架 设计图：本设计图采用1280px 设计尺寸 1.2 需求分析 ① 屏幕缩放发现中屏幕和大屏幕布局是一致的。因此我们列定义为col-md-就可以了，md是大于等于970以上的 ② 屏幕缩放发现小屏幕布 阅读全文
摘要：
响应式布局+Bootstrap 一、响应式布局 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的 1.1 响应式布局容器 响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面子元素的排列方式 阅读全文
摘要：
苏宁首页 一、准备工作 苏宁网站首页的开发尺寸右320px、360px、375px、384px、400ox、414px、480px、540px、720px、750px等 分为15等份 默认html字体为50px 1.1 公共common.less文件制作 根据rem+媒体查询制作 1.2 用@imp 阅读全文
摘要：
rem布局 + 媒体查询 + Less + flexible 一、rem布局 1.1 思考 （1）页面布局文字能否随着屏幕大小变化而变化？ 可以，在rem之前，只能通过设置固定的字号大小来布局，通过rem可以实现 （2） 流式布局和flex布局主要针对与宽度故居，那高度如何设置？ 通过设置固定值而进 阅读全文
摘要：
携程网首页 一、初始设置 1.1 添加meta标签 1.2 初始化样式 body {...} 特殊样式 css3盒模型: box-sizing 点击高亮: * {-webkit-tap-highlight-color} ios给按钮和输入框加自定义样式: input {-webkit-appeara 阅读全文
摘要：
flex布局 一、flex布局基础 1.1 传统布局与flex布局 （1）传统布局 兼容性好 布局繁琐 局限性，不能在移动端又很好的布局 （2）flex布局 操作方便，布局急为简单，移动端应用很广泛 PC端浏览器支持情况较差 IE11或耕地版本，不支持或仅部分支持 不用清除浮动等 （3）布局选择建议 阅读全文
摘要：
流式布局-京东项目 一、流式布局原理 1.1 流式布局（百分比布局） 流式布局就是百分比布局，也称非固定像素布局 通过将盒子的宽度设置成百分比，从而根据屏幕的宽度进行伸缩 再移动web开发使用的比较常见 （1）注意事项 制作过程中，需要定义页面的最大和最小支持宽度 max-width min-wid 阅读全文
摘要：
移动开发基础 一、了解移动基础 1.1 移动web开发基础 1.1.1 浏览器现状 国内得UC和QQ, 百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发得内核，就像国内得手机操作系统都是基于ANDROID修改开发得一样 兼容移动端主流浏览器，处理Webkit内核浏览器即可 1.1 阅读全文