移动端
移动端笔记(皮毛)
杨蛋蛋~R
花自向阳开放 我自向前成长
展开
-
rem适配方案 / 适配方案技术使用
rem适配方案让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备。使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化,元素尺寸也会发生变化,从而达到等比缩放的适配。rem实际开发适配方案按照设计稿与设备宽度的比例,动态计算并设置html根标签的font-size大小;(媒体查询)CSS中,设计稿元素的宽、高、相对位置等取值,按照同等比例换算为rem为单位的值;rem适配方案技术使用(市场主流)原创 2020-11-09 15:46:46 · 443 阅读 · 0 评论 -
移动端WEB开发5-rem适配布局
rem适配布局rem基础rem单位rem(root em)是一个相对单位,类似于em , em是相对于父元素的字体大小。不同的是rem的基准是相对于 html 元素的字体大小。比如,根元素( html )设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小,可以实现整体控制...原创 2020-11-09 15:06:49 · 160 阅读 · 0 评论 -
移动端WEB开发4-flex布局(弹性布局)--子项属性(圣杯布局、双飞翼布局)
flex布局子项常见属性属性说明flex子项目占的份数align-self控制子项自己在侧轴的排列方式order属性定义子项的排列顺序(前后顺序)具体用法1. flexflex属性定义子项目分配剩余空间,用flex来表示占多少份数。默认为0.item { flex: <number>;/* default o*/ }圣杯布局和双飞翼布局达到的效果基本相同,都是侧边两栏宽度固定,中间栏宽度自适应圣杯布局:先设置父盒原创 2020-11-09 13:02:08 · 236 阅读 · 0 评论 -
移动端WEB开发3-flex布局(弹性布局)--父项属性
flex布局flex布局原理flex是flexible Box的缩写,意为"弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效。伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局采用Flex布局的元素,称为Flex容器(flex container),简称"容器",它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。例原创 2020-11-09 12:55:34 · 144 阅读 · 0 评论 -
移动端WEB开发2-移动端开发方案 / 移动端技术解决方案 / 移动端常见布局之流式布局
移动端开发方案单独移动端页面(主流)通常情况下,网址域名前面加 m(mobile) 可以打开移动端。通过判断设备,如果是移动设备打开,则跳到移动端页面。比如:京东商城手机版、淘宝触屏版、苏宁易购手机版响应式兼容PC移动端比如:三星电子官网: www.samsung.com/cn/,通过判断屏幕宽度来改变样式,以适应不同终端。缺点:制作麻烦, 需要花很大精力去调兼容性问题移动端技术解决方案移动端浏览器移动端浏览器基本以 webkit 内核为主,因此我们就考虑webkit兼容性原创 2020-11-08 23:03:09 · 201 阅读 · 0 评论 -
移动端WEB开发1-移动端调试方法 / 视口 / 二倍图
移动端基础兼容移动端主流浏览器,处理Webkit内核浏览器即可开发的移动端主要针对手机端开发移动端碎片化比较严重,分辨率盒屏幕尺寸大小不一移动端调试方法Chrome DevTools(谷歌浏览器)的模拟手机调试搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器使用外网服务器,直接IP或域名访问视口视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口布局视口 layout viewport一般移动设备的浏览器都默认设原创 2020-11-08 22:40:19 · 226 阅读 · 0 评论 -
移动端常用开发插件
移动端常用开发插件Swiper 插件(轮播图插件)https://www.swiper.com.cn/首先下载 Swiper 插件压缩包解压缩找到文件夹里面的 demo 文件夹 从里面众多的html 文件里选取想要的样式,打开后右键点击页面,选择查看源码从源码里查看需要引入的相关文件,例:<link rel="stylesheet" href="../package/swiper-bundle.min.css"> 根据路径在文件夹里查找然后引入创建自己的 js 文原创 2020-10-10 11:12:02 · 290 阅读 · 0 评论 -
案例:移动端返回顶部 / 移动端 click 延时解决方案
移动端返回顶部功能:滚动到某个地方显示事件 scroll 页面滚动事件代码:<style> * { height: 800px; } .nav { height: 200px; background-color: aquamarine; } .icon { display: none; float: right; width: 40原创 2020-10-09 17:29:13 · 239 阅读 · 0 评论 -
案例:移动端轮播图 / classList
移动端常见特效案例:移动端轮播图功能基本和pc端一致可以自动播放图片手指可以拖动播放轮播图自动播放功能开启定时器移动端移动,可以使用translate 移动可以添加过渡效果无缝滚动判断条件是:等到图片滚动完毕再去判断,就是过渡完成后判断此时需要添加过渡完成事件 transitionend判断条件:如果索引号为 3 (图片是3张 ,但实际添加的是5张 详情见代码),说明走到最后一张,此时索引号要复原为0此时图片去除过渡效果,然后移动如果索引号小于0 ,说明是倒着走原创 2020-10-08 23:40:26 · 211 阅读 · 0 评论 -
移动端网页布局--触摸事件
移动端网页布局移动端浏览器兼容性较好,不需要考虑兼容性问题。触屏事件触屏touch事件说明touchstart手指触摸到一个DOM元素时触发touchmove手指再一个DOM元素上滑动时触发touchend手指从一个DOM上移开时触发触摸事件对象TouchEvent触摸列表说明touches正在触摸屏幕的所有的手指列表targetTouches正在触摸当前元素DOM 元素的手指列表changedTouches手指状态发原创 2020-10-08 20:07:25 · 200 阅读 · 0 评论