随笔分类 - 移动端开发
摘要:需求: 在不同的移动终端设备中实现,UI设计稿的等比例适配。 方案: 布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size。 假设设计稿是宽750px来做的,书写css方便计算考虑,根节点的font-size假定为100px,得出设备宽为7.5rem。设计稿中标注的任何
阅读全文
摘要:移动H5前端性能优化 一、概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点,首屏加载3秒完成或使用Loading 4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB 5. Mobile
阅读全文
摘要:京东秒杀倒计时 1、HTML 2、CSS 3、js 运行效果:
阅读全文
摘要:一、移动端三种布局 1、有最大、最小宽度的百分比自适应布局 适用场景:门户网站首页,图片较多的首页。 2、百分比自适应布局 适用场景:信息文字较多的网页,内容较多网页。 3、全屏自适应布局 适用场景:单页面网页,移动web app 页面。 二 、Box-sizing在移动端的使用 在百分比定宽的页面
阅读全文
摘要:1、响应式布局 开发一个页面,在所有的设备上都能够完美展示。 媒体查询:@media screen and (max-width:100px) { } 媒体类型:screen(屏幕) print(打印机)handheld(手持设备)all(通用) 常用媒体查询参数: width —— 视口宽高hei
阅读全文
摘要:1、 piexl 像素知识 640 * 1136的图片能不能在iphone5上完全展示?iphone5分辨率640*1136 逻辑像素与物理像素的关系px逻辑像素:浏览器使用的抽象单位dp,pt物理像素:设备无关像素dpr:设备像素缩放比计算公式:1px = (dpr)^2 * dpiphone5的
阅读全文
摘要:rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport,该方案自动帮你设置),此方案仅适用于移动端web rem布局(进阶版) 该方案使用相当简单,把下面
阅读全文
摘要:一、总之一句话, 尽量用mm 毫米作为标准单位. 采用新的相对单位 rem 首先设置html的 font-size 为根大小. html{ font-size:1mm; } .titleheight{ height:10rem; //这里等于10mm width:11rem; //这里等于11mm
阅读全文
摘要:一、关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单,关键在于对不同设备的适配。之前介绍了一篇关于移动端rem布局方案,这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更
阅读全文
摘要:一、移动端轮播图滑动 1、先获取手指在轮播图元素上的滑动方向(左右) 2、根据获得到的方向选择上一张或下一张 javascript代码 1 //移动端轮播图滑动 2 3 //1、先获取手指在轮播图元素上的滑动方向(左右) 4 //手指触摸开始时记录手指所在的坐标X 5 6 //获取界面上的轮播图容器
阅读全文
摘要:下面采用HTML+CSS+JavaScript实现模态框,并采用Flex布局和多媒体查询实现响应式。 一、模态框HTML代码 首先定义模态框的overlayer,然后定义模态框的内容包括header(带关闭按钮)、body和footer。 二、模态框CSS代码 模态框model默认不显示(displ
阅读全文
摘要:1、当我们想使用百分比来进行两个盒子的并排 代码: 当我们想通过inline-block让两个div来并排,一个战父盒子的80%,一个占20%。可能看起来刚好100%,但是会由于代码中左右两个盒子之间的空白字符会导致右边的盒子掉下来。 2、解决办法 (1)消除空白字符 让左右两个盒子的代码紧密连起来
阅读全文
摘要:Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel 一、基本的轮播图实现 HTML代码 二、轮播图使用中的问题 1、由于轮播图片超宽造成的影响 - 美工
阅读全文
摘要:一、函数库 underscoreJS _.template: 二、rem布局 准备编辑这段时发现简书上已经有作者写了关于rem布局的介绍,并且他的设置比我所用的更加简洁,贴上地址供大家学习参考。 手机端页面自适应解决方案—rem布局进阶版(附源码示例) 三、移动web开发中的常见问题 1、移动端如何
阅读全文
摘要:一、流式布局 1、 什么是流式布局 流式布局就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充,同时会设定最小宽度和最大宽度,适用于图片比较多的首页、门户、电商等。 在这里我们以京东的M站为例进行说明: 可以看到,在京东各个模块的主容器中,都设置
阅读全文
摘要:1、HTML5文档结构 注意lang=“zh-CN”表示网页为中文,如果是英文则为lang=“en-CN”。 2、浏览器兼容模式 如果网页在IE中打开,必须用最新的引擎渲染打开 快捷方式:sublime中通过emmet meta:compat插入 1 <meta http-equiv="X-UA-C
阅读全文
摘要:一、Bootstrap使用 1、搭建Bootstrap页面骨架及项目目录结构 ``` ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ··················&
阅读全文
摘要:移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间的关系。这里首先了解以下几个概念。 一、视口 1、layout viewport(布局视口) 一般移
阅读全文
摘要:移动端视口的分类说明。在开始之前,先看一个典型的例子: 上述代码相信大家在做移动端开发时经常去书写。它研究了两个内容:meta视口和宽度媒体查询。通常我们都会称上述代码为CSS3的媒体查询功能。使用媒体查询功能能够解决针对桌面级的web设计在移动端不同尺寸下的兼容展现。 一、像素 研究视口之前,先说
阅读全文