随笔分类 - 04_移动端开发
摘要：alibailiu图片logo修改 1. 小屏幕下 修改前 出现的问题：在中屏及以上都是正常显示的，但是到小屏幕的时候开始单独占据整行，这样高度也会同比例缩放，导致整个图巨大无比。我们希望的效果是：在小屏幕的时候宽度可以独占整行，但是高度不要等比例缩放。 修改后 大屏： 小屏： 再让图片居中显示（转
阅读全文
摘要：1 技术选型 方案：我们采取响应式页面开发方案 技术：bootstrap框架 设计图：本设计图采用1280px设计尺寸 2 页面布局分析 屏幕缩放发现大屏幕和中屏幕布局一致，因此列定义为col md 即可。 屏幕缩放发现小屏幕布局发生变化，因此需要为小屏幕根据需求改变布局。 屏幕缩放发现超小屏幕布局
阅读全文
摘要：1.1 栅格系统介绍 利用Bootstrap做响应式内部采取的是一种叫做栅格系统的方式。 栅格系统：英文名gridsystems,又称网格系统，它是指将页面布局划分成等宽的列，然后通过列数的定义来模块化页面布局。 与rem划分等份数不同的是：rem响应式布局中是将整个屏幕划分成若干等分，而栅格系统是
阅读全文
摘要：1.1 介绍 Bootstrap来自Twitter,是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的，它简洁灵活，使得web开发更加快捷。 中文官网：http://www.bootcss.com/ 官网：http://getbootstrap.com/ 推荐
阅读全文
摘要：1.1 响应式开发原理 就是使用媒体查询针对不同的宽度的设备进行布局和样式的设置，从而适配不同设备的目的。在响应式开发中将设备划分成以下4个挡位。 1.2 响应式布局容器 响应式需要一个父级作为布局容器来配合子元素实现变化效果。 原理：在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子
阅读全文
摘要：1. 高效简洁的rem适配方案flexible.js flexible.js是淘宝团队出的简洁高效移动端适配库，我们再也不需要写不同屏幕的媒体查询，因而里面js做了处理。 原理：将当前设备划分成10等分，不同设备下比例保持一致。 处理：我们要做的是确定当前设备的html文字大小（随设计稿而定） 举例
阅读全文
摘要：1 在index.less中书写具体样式 1.1 其他的公共样式可以继续往common.less文件中缀加 1.2 body样式 1.2 整体结构搭建 1.3 顶部搜索模块 分成三个部分：左、中、右。左右宽度高度给固定大小；中间flex:1，独占剩余空间一份; index.less文件 1.4 ba
阅读全文
摘要：1. 技术选型 访问地址：m.suning.com 方案：我们采用单独制作移动页面方案 技术：布局采用rem适配布局(less+rem+媒体查询) 设计图：本设计图采用750px设计尺寸 2. 搭建相关文件夹结构 css images upload index.html 3. 设置视口标签和引入样式
阅读全文
摘要：1. rem适配方案 目标：让一些不能等比例适配的元素达到当设备尺寸发生改变的时候，等比例适配当前的设备。 方法：使用媒体查询更具不同的设备安装比例设置html字体大小，然后页面元素使用rem做尺寸单位，当html字体变化的时候，元素尺寸也会发生变化，从而达到等比缩放的适配。 1.1 实际开发适配方
阅读全文
摘要：1. less介绍 less是一门CSS扩展语言，也成为CSS预处理器，作为CSS一种形式的扩展，并没有减少CSS的功能，而是在现有的CSS语法之上，为CSS加入程序式语言的特性。它在CSS语法的基础之上，引入了变量，Mixin(混入)，运算以及函数等功能，大大简化了CSS的缩写，并降低了CSS的维
阅读全文
摘要：2. 媒体查询 2.1 媒体查询是CSS3新语法 使用媒体查询，可以针对不同的媒体类型定义不同的样式 媒体查询可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。 目前针对很多苹果手机、安卓手机、平板等设备都用到多媒体查询。 2.2 语法格式
阅读全文
摘要：1. em 在介绍rem之前，先介绍单位em。em是相对于父元素的字体大小来说的，使用的时候要有父元素，且父元素要有字体大小。 2. rem (root em) 与em不同的是，rem不是相对于父级元素的字体大小，而是相对于html元素的字体大小，所以叫做root em。 rem的优点就是可以通过修
阅读全文
摘要：访问网站：m.ctrip.com 1. 技术选型 方案：单独制作移动端页面的方案 技术：采用flex伸缩布局 2.搭建相关文件夹结构 3. 引入相关文件 4. body样式 5. 统一样式 6. 搜索模块 说明：该模块利用固定定位，分成两个部分，搜索模块和登陆模块，注意这里的搜索模块不是真正意义上的
阅读全文
摘要：1 传统布局与flex布局 传统布局（以之前所学的PC端布局为例） 兼容性好 布局繁琐 局限性，不可以在移动端很好的布局 flex弹性布局 操作方便简单，移动端应用广泛 PC端浏览器支持情况较差 IE11或更低版本，不支持或仅部分支持 建议 如果是PC端页面布局，采用传统布局 如果是移动端或者不考虑
阅读全文
摘要：移动端布局和以前我们学习的PC端有所区别： 1.单独制作移动端页面（主流） 流式布局（百分比布局） flex弹性布局（强烈推荐） less+rem+媒体查询布局 混合布局 2.响应式页面兼容移动端（其次） 媒体查询 bootstarp 这也是接下来的课程安排。
阅读全文
摘要：案例：京东移动端首页 访问地址：m.jd.com 说明：该案例是仿照京东的手机端页面制作，相当于复制，所以这里没有用到psd文件，以下所有的尺寸大小、颜色rgb、图片等都通过网问该网站直接得到。同时注意，为了在移动端清晰显示，这些图片的实际尺寸都很大，所有写样式的时候注意缩放。 1. 技术选型 方案
阅读全文
摘要：5.1移动端浏览器 移动端浏览器基本以webkit内核为主，因此只需考虑webkit兼容性问题。 可以放心地使用H5标签和CSS3样式 同时我们浏览器的私有前缀只需要考虑添加webkit即可 5.2 CSS初始化normalize.css 移动端CSS初始化推荐使用normalize.css nor
阅读全文
摘要：4.1移动端主流方案 1. 单独制作移动页面(主流) 京东商城手机版 淘宝触屏版 苏宁易购手机版... 2. 响应式页面兼容移动端(其次) 三星手机官网... 4.2 单独移动端页面（主流） 移动端的页面和PC端的页面是分开的，是不一样的，移动端的页面是单独制作的，通常情况下，网站域名前加m(mob
阅读全文
摘要：3.1 物理像素&物理像素比 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。是厂商在出场时就设置好的。比如苹果6、7、8是750 1334 我们开发时的1px不是一定等于一个物理像素的 PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同，举例如下： 在移动端iPhone8（宽750
阅读全文
摘要：视口就是浏览器显示页面内容的屏幕区域，视口可以分为：局部视口、视觉视口、理想视口 2.1 布局视口layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期PC端页面在手机上显示的问题 iOS,Android基本都将这个视口分辨率设置为980px, 所以PC上的网页大
阅读全文
浙公网安备 33010602011771号