img 响应式图片_img 图片怎么相应-爱代码爱编程
文章目录 srcset、sizespicture 标签 srcset、sizes 对于兼容性不好的浏览器，会继续使用默认 src 属性中的图片 srcset 支持定义几组图片和对应的尺寸sizes
移动端 滚动穿透-爱代码爱编程
文章目录 滚动穿透弹窗内容滚动到底部后带动底层页面滚动在弹窗出现时可以直接通过页面滚动条滚动 禁用底层页面滚动弹出层将覆盖整个视口禁用触摸事件监听弹出层滚动位置阻止弹出层的滚动事件冒泡 滚动穿透
大屏适配方案-爱代码爱编程
文章目录 vw、vhremscale解决缩放热区偏移问题 vw、vh 将容器布局通过vw、vh设置 vwDiv = (300px / document.documentElement.cli
移动端 自适应布局方案-爱代码爱编程
文章目录 DPRrem布局实现机理优点缺点相关技术方案 viewport 布局优点缺点相关技术方案 媒体查询+等比缩放原理 DPR DPR = 设备物理像素 / CSS像素 DPR = 2 为例，把
h5 兼容底部地址栏、搜索栏_神奇大叔的博客-爱代码爱编程
文章目录 设置页面大小为100vh出现的问题方式一：设置页面高度为100%方式二：postcss-100vh-fix方式三：resize+window.innerHeight方式四：height: -webkit-f
h5 手机键盘兼容_神奇大叔的博客-爱代码爱编程
文章目录 键盘弹起页面表现ios表现安卓表现 监听软键盘弹起和收起ios监听focus、blur事件安卓还可见监听页面高度 获取软键盘高度通过window.visualViewport异步获取 唤起软键盘
移动端1px解决方案-爱代码爱编程
原因: 一般来说,在桌面的浏览器中,设备像素比（dpr）等于1,一个css像素就是代表的一个物理像素。 而在移动端,大多数机型都不是为1,其中iphone的dpr普遍是2和3,那么一个css像素不再是对应一个物理像素,而是2个和3个物理像素。 故css设置1px,实际产生的物理像素会变大,使得1px的效果更大 1、小数值px <body&
移动端viewport与meta-爱代码爱编程
一、viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的vi
像素基本概念-爱代码爱编程
手机(屏幕)尺寸:指对角线的长度,用英寸表示 css像素:逻辑像素,也就是我们写代码时候的px,注意缩放会改变css像素大小 设备像素pt:又叫物理像素,不同的设备的物理像素大小也是不同的。 pt:指的是72分之一英寸。 ppi:像素密度,即每英寸(in)像素个数，常用于ui设计 ppi=屏幕分辨率的各方向的平方的和/屏幕尺寸。 以ipho
移动端原生手势事件-爱代码爱编程
touchstart 当手指接触屏幕时触发 touchmove 当已经接触屏幕的手指开始移动的时候触发 touchend 当手指离开屏幕时触发 touchcancel 可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件 1、由于触摸会导致屏幕动来动去,使用时先阻止默认事件 ev
移动端视口适配和解决300毫秒点击延迟-爱代码爱编程
移动端适配和解决300毫秒点击延迟 方式一: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" /> <script src="https://
vue 搭建导航栏、六个页面(两个子页面)示例-爱代码爱编程
vue实例化 1、创建项目 vue init webpack xx 其中: Install vue-router? Yes 其他选项n 安装选手动 解决问题: (1)设置首页重定向默认路径后,点击其他路由,再点击首页,不显示默认路径 原因:路径不对 若'/'设置重定向为'/home/h2',,则只有到
zepto 移动端案例(动画等)-爱代码爱编程
处理:滑动页面事件、动画效果(缩放、各方位滑动、抖动、明暗)、 代码示例:js文件: $(function(){ //定义方向对象 var direction={up:1,right:2,down:3,left:4}; //初始化两个页面坐标 var now={col:1,row:1}; var last={c
携程移动端案例-爱代码爱编程
采用rem适配各种移动端,只需要计算rem,通用(375/750)*100=50px;即将下列 的px数值变成,数值/50rem;即可 html文件: <html> <head> <meta charset="utf-8"> <meta name='viewport' content='width=devi
rem less预加载css表-爱代码爱编程
预加载css表的less文件 less文件允许书写算式,css表样式中必须写具体值 在后缀为.less的文件书写带有算式的css后,通过kuala软件找到指定.less文件 解析,勾选自动解析即可每次保存.less文件自动生成一个对应的css文件 .less文件: table{ width:(750/187.733) rem; text-
rem移动端课程表案例-爱代码爱编程
<html> <head> <meta charset="utf-8"> <meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.
rem单位-爱代码爱编程
rem单位 rem是css中的一个尺寸单位,和px、%,em(相对于父元素的字体大小)单位一样都是设置大小 rem:html字体大小的多少倍 用法: 设置rem大小: 方式一 document.documentElement.style.fontSize=(document.documentElement.clientWidth/75
视口概念、移动端视口适配-爱代码爱编程
视口 视图窗口,页面中html元素的显示大小 移动端 页面要想在移动端加载必须进行视口的适配 如果不对页面进行调整,那么在移动端加载页面视口宽度都为980px 解决方案 源信息标签,对页面进行设置 <meta name='viewport' content='width=device-width,user-scalable=no,ini