当前位置: 首页 > Web前端 > HTML5

移动端适配布局

时间:2023-04-05 20:45:58 HTML5

1.像素屏幕分辨率指的是横纵坐标上的像素点,单位是px,1px=1像素iphone6750*1334屏幕像素密度:像素点可以被屏幕上每英寸显示的屏幕分辨率和像素密度的数量由设备制造商指定,像素的物理像素是不可修改的:任何设备的物理像素数量都是固定的,它是最小粒度屏幕可以显示。CSS像素:CSS像素是浏览器主要用来确定网页内容的抽象单位。在普通屏幕上,一个CSS像素对应一个设备像素。CSS像素与物理像素的关系:1.屏幕特性2.用户缩放行为2.Viewport布局视口(layoutviewport)是一个容器,用来存放PC端页面默认的布局视口是980,IE是1024。一般移动端页面有两套方案,一套是写两套页面,一套是响应式布局。视觉视口视觉视口与设备屏幕的面积一样宽,像素值由CSS像素决定。理想视口布局视口的默认宽度不是理想宽度。对于移动设备,理想的情况是用户进入界面后不再缩放。只有专门为移动设备开发的网站才有理想的视口。width:布局视口的宽度device-width:设备的独立像素当该值加上meta时,设备无关像素=CSSpixels=375withoutmeta:Physicalpixels:750Device-independentpixels:375CSSpixels:980同一个元素,在不同的设备上,渲染效果是一样的,相当于有meta:Physicalpixels:750Device-independentpixels:375CSSpixels:375同一个元素,在不同的设备上,渲染效果不一样,不等比dpr(像素比)=物理像素/设备无关像素移动缩放:布局视图端口永远不变Zoom:CSS3像素区域变大,元素的像素值保持不变,但视觉视口变小从技术上讲,缩放是放大或缩小CSS像素区域的过程,改变的是视觉视口大小。3.事件1.手指按下touchstart2。手指在触摸移动时移动3。手指离开ontouchend取消浏览器默认行为document.addEventListener("touchstart",function(event){event.preventDefault()})移动端准备工作:1.meta标签2.清除默认样式3.清除系统滚动条4.取消默认行为5.适配6.直通处理直通处理方案:1.使a元素无法跳转,禁止浏览器默认行为2.box框消失,点击a元素,a元素应该跳转document.addEventListener("touchstart",function(){event.preventDefault()})varaTags=document.querySelectorAll('a')for(vari=0;i