八.web移动开发
关注
分享
扫一扫
文章平均质量分 90
庚中
这个作者很懒，什么都没留下…
展开
-
px一键全部自动转换rem工具(pxtorem)
比如在iphone678中我们html的font-size设置为16px(设置方法可看我移动开发文章),而设计稿宽度为375(一般都是这个,谷歌浏览器手机模式控制台打开也是这个),那就可以按图示使用:完整源码:(直接创建html文件把如下代码复制进去即可)<!doctype html><html><head> <meta charset=...原创 2019-12-29 00:31:27 · 3403 阅读 · 1 评论 -
web移动开发总结(一)
概述移动web的概念和发展历史移动web的开发方式和区别响应式原理和媒体查询(重点)响应式框架的介绍bootstrap框架的基本使用bootstrap全局CSS样式布局容器使用(重点)bootstrap全局CSS样式栅格系统使用(重点)bootstrap全局CSS样式响应式工具使用微金所项目搭建和头部的结构 (重点)web前端PC端的web ： 在PC端电脑访问的web...原创 2018-12-02 21:48:24 · 10819 阅读 · 6 评论 -
web移动开发总结(二)
一. 字体图标1.字体图标的生成方法2…图标的原理和组成部分3.字体图标的使用方式3.1引入字体图标的CSS文件二.CSS预处理器1.什么是 CSS预处理器?2.常用的css预处理器:less,sass,style3.less4.less:特点5.less的使用5.1引入.less文件5.2引入less.js的编译器5.3服务器打开5.4编译原理三.使用less实现布...原创 2018-12-03 20:36:52 · 1360 阅读 · 0 评论 -
web移动开发总结(三)
今天学习总结移动端的一些基本基础知识移动京东的项目搭建公共样式的定义顶部通栏的布局轮播图的布局导航条的布局秒杀商品布局京东超市布局原生移动web开发响应式开发： 写一个页面同时适配多个终端原生的移动web开发： 分别针对每个端都写一套代码 PC端写一套代码 移动端写一套代码PC端一般使用固定宽高的布局移动端全屏撑满整个页面 全屏100% 使用百分比布局（流式布...原创 2018-12-06 12:49:52 · 5221 阅读 · 1 评论 -
web移动开发总结(四)
总结移动端的一些基本基础知识移动京东的项目搭建公共样式的定义顶部通栏的布局轮播图的布局导航条的布局秒杀商品布局京东超市布局原生移动web开发响应式开发： 写一个页面同时适配多个终端原生的移动web开发： 分别针对每个端都写一套代码 PC端写一套代码 移动端写一套代码PC端一般使用固定宽高的布局移动端全屏撑满整个页面 全屏100% 使用百分比布局（流式布局）目...原创 2018-12-10 20:26:40 · 4438 阅读 · 6 评论 -
web移动开发总结(五)
总结顶部搜索框渐变JS秒杀商品倒计时JS轮播图插件的使用分类页面的布局顶部搜索的背景色渐变需求： 在滚动条滚动距离在轮播图高度范围内的时候实现顶部搜索的背景色透明度渐变rgba(255,0,0,0)rgba(255,0,0,1)rgba的最后一个值透明度从0-1的变化思路： 计算当前的滚动条滚动到的距离的透明度的值获取当前滚动条的距离获取当前轮播图的高度计算透明度...原创 2018-12-10 20:28:39 · 6573 阅读 · 1 评论 -
web移动开发总结(六)
总结分类左侧的点击吸顶移动端的滑动事件 (重点)移动端点击事件延迟和解决 (重点)移动端的zepto框架rem的概念和实现屏幕适配 (重点)rem工具的使用实现jd项目分类页面左侧的点击吸顶效果需求点击了左侧分类的菜单位移到当前点击的分类菜单 到顶部的位置位移为 （-当前菜单索引*菜单高度）位移的时候还需要添加过渡效果 慢慢的上去当菜单需要位移...原创 2018-12-10 20:29:58 · 4238 阅读 · 0 评论 -
移动端rem适配(只需三个步骤)
开始前:一定要记住,在iphone5下,1rem=16px;图示:下面开始三个步骤:1.获取html的宽操作代码:let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;//有些浏览器documentElement获取不到,那就使用后面的body2.获取htmlDom元素le...原创 2019-05-10 13:52:19 · 28194 阅读 · 3 评论