移动端与REM
文章平均质量分 63
神奇大叔
这个作者很懒,什么都没留下…
展开
-
移动端 滚动穿透
滚动穿透原创 2023-07-13 14:39:16 · 469 阅读 · 0 评论 -
大屏适配方案
【代码】大屏适配方案。原创 2023-07-12 15:33:14 · 145 阅读 · 0 评论 -
移动端 自适应布局方案
这里的视窗(Viewport) 指的是浏览器可视化的区域window.innerWidth/window.innerHeight 的大小。rem 就是相对于根元素 html 的 font-size 来做计算。通过媒体查询适应不同机型,配合rem或vw进行布局。DPR = 设备物理像素 / CSS像素。原创 2023-01-31 20:07:10 · 905 阅读 · 0 评论 -
img 响应式图片
对于兼容性不好的浏览器,会继续使用默认 src 属性中的图片。原创 2022-11-01 11:21:20 · 130 阅读 · 0 评论 -
H5 兼容底部地址栏、搜索栏
H5 兼容底部地址栏、搜索栏。原创 2022-09-20 20:53:41 · 1215 阅读 · 0 评论 -
H5 手机键盘兼容
H5 手机键盘兼容。原创 2022-09-09 14:25:49 · 3466 阅读 · 1 评论 -
移动端1px解决方案
原因: 一般来说,在桌面的浏览器中,设备像素比(dpr)等于1,一个css像素就是代表的一个物理像素。 而在移动端,大多数机型都不是为1,其中iphone的dpr普遍是2和3,那么一个css像素不再是对应一个物理像素,而是2个和3个物理像素。 故css设置1px,实际产生的物理像素会变大,使得1px的效果更大1、小数值px<body> <div id="main" style="border: 1px solid #000000;"></div>&l原创 2021-12-01 18:59:37 · 1862 阅读 · 0 评论 -
移动端 viewport视口与meta
一、viewport的概念通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。在默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的原创 2021-11-12 17:24:47 · 684 阅读 · 0 评论 -
rem rem适配案例及讲解
网易的做法:先来看看网易在不同分辨率下,呈现的效果:是在本文第1部分提到,使用rem布局结合在html上根据不同分辨率设置不同font-size有很多不好解决的麻烦,网易是如何解决的呢?最根本的原因在于,网易页面上html的font-size不是预先通过媒介查询在css里定义好的,而是通过js计算出来的,所以当分辨率发生变化时,html的font-size就会变,不过这得在你调整分辨率后,刷新页面才能看得到效果。你看代码就知道为啥font-size是直接写到html的style上面的了(js设置的原因)原创 2021-06-17 22:55:49 · 449 阅读 · 0 评论 -
像素基本概念
手机尺寸:指对角线的长度,用英寸表示单位 em:一个字符长度 pt:点 in:英尺像素密度(ppi/dpi):水平像素^2+竖直像素^2的和开方/手机尺寸 ppi>320即可为高清屏设备独立像素(保证图像在不同设备上占比相同) ios:pt android:dp 独立像素和像素关系: window.devicePixelRatio获取物理设备的物理像素 window.screen.width; 只可读取,不可改变css像素 pc端:默认和物理像素保持一致原创 2020-10-10 18:24:12 · 2803 阅读 · 1 评论 -
移动端原生手势事件
touchstart 当手指接触屏幕时触发touchmove 当已经接触屏幕的手指开始移动的时候触发touchend 当手指离开屏幕时触发touchcancel 可由系统进行的触发,比如手指触摸屏幕的时候,突然alert了一下,或者系统中其他打断了touch的行为,则可以触发该事件1、由于触摸会导致屏幕动来动去,使用时先阻止默认事件 event.preventDefault()2、event对象包含的额外参数 (1)touches:表示当前跟踪的触摸操作的touch对象的数组。原创 2020-08-13 22:50:18 · 910 阅读 · 0 评论 -
移动端手势库
1:GMU:http://cloudajs.org/ui/brand/gmuGMU是基于zepto的mobile UI组件库,提供webapp、pad端简单易用的UI组件!http://gmu.baidu.com5640239-1799532dc789171f.png2:Hammer.js:http://hammerjs.github.io/Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。多点触控插件Hammer.原创 2020-08-13 22:26:34 · 918 阅读 · 0 评论 -
移动端事件顺序、解决300毫秒点击延迟
【代码】移动端事件顺序、解决300毫秒点击延迟。原创 2020-06-08 16:18:16 · 588 阅读 · 0 评论 -
zepto 移动端案例(动画等)
处理:滑动页面事件、动画效果(缩放、各方位滑动、抖动、明暗)、代码示例:js文件:$(function(){ //定义方向对象 var direction={up:1,right:2,down:3,left:4}; //初始化两个页面坐标 var now={col:1,row:1}; var last={col:0,row:0}; //上一...原创 2020-02-03 15:52:57 · 698 阅读 · 0 评论 -
rem单位
rem单位 rem是css中的一个尺寸单位,和px、%,em(相对于父元素的字体大小)单位一样都是设置大小 rem:html字体大小的多少倍 用法: 设置rem大小: document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px'; 750px是当前流行美工稿...原创 2020-01-15 22:58:18 · 7329 阅读 · 0 评论 -
视口概念、移动端视口适配
视口 视图窗口,页面中html元素的显示大小移动端 页面要想在移动端加载必须进行视口的适配 如果不对页面进行调整,那么在移动端加载页面视口宽度都为980px解决方案 源信息标签,对页面进行设置 <meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,minimu...原创 2020-01-15 22:10:10 · 319 阅读 · 0 评论