最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

移动端的适配及布局

XAMPP下载 admin 683浏览 0评论
 一. 像素
屏幕分辨率
指在横纵坐标的像素点,单位是 px,1px = 1 像素点
iphone6 750*1334
屏幕像素密度:屏幕上每英寸可以显示的像素点的数量
屏幕分辨率,像素密度都是设备厂商规定的,不能修改

像素
物理像素:任何设备的物理像素的数量都是固定的,它是屏幕能显示的最小粒度。
CSS像素: CSS 像素是一个抽象的单位,主要用于浏览器确定 Web 页面的内容。
在普通屏下,一个 CSS 像素对应一个设备像素

CSS 像素与 物理像素的关系:

1. 屏幕特性
2. 用户缩放的行为
二. 视口
layout viewport(布局视口)
它是一个容器,用来装下 PC 端的页面
默认的布局视口都是 980, IE 是1024
一般移动端的页面有两套方案,一是写两套页面,一个是响应式布局。
视觉视口
视觉视口与设备屏幕的区域一样宽,像素值是 CSS 像素决定的。
理想视口
布局视口的默认宽度并不是一个理想的宽度,对于移动设备来说,最理想的情况是用户进入界面不再进行缩放。只有专门为移动设备开发的网站,才有理想视口这么一说

<meta name=”viewport” content=”width=device-width”/>
width:布局视口的宽
device-width:设备独立像素的值

当加上 meta,设备独立像素 = CSS 像素 = 375

没有 meta:

物理像素: 750
设备独立像素:375
CSS 像素:980
同一个元素,在不同的设备上,呈现的效果一样,等比
有 meta:

物理像素: 750
设备独立像素:375
CSS 像素:375
同一个元素,在不同的设备上,呈现的效果不一样,不等比
dpr(像素比) = 物理像素/设备独立像素

移动端缩放:布局视口永远不变

放大:CSS3 像素面积变大,元素像素值不变,视觉视口反而是变小了
从技术层面上来讲,缩放就是放大或缩小 CSS 像素面积的过程,改变的是视觉视口的尺寸。

三. 事件
1. 手指按下
ontouchstart
2. 手指移动
ontouchmove
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()
})

var aTags = document.querySelectorAll(‘a’)

for (var i = 0;i < a.length;i++) {
aTags[i].addEventListener(“touchstart”, function(){
window.location.href = this.href
})
}
竖向滑屏

// 手指按下(父元素绑定事件)

// 手指移动(不需要嵌套在按下事件中)

如果手指抬起来的时候没有额外的动作,就不需要写手指抬起事件

四. 适配
em: 参照自身的字体大小
rem:参照根元素的字体大小(html,默认16px)
rem 适配原理:

1. 页面中的所有元素,单位都是 rem
2. 把整个屏幕的宽度设置成根元素的字体大小(1 rem = 375px)

var styleNode = document.createElement(‘style’)
rem 适配
图纸较大,750,1080 页面元素较多

viewport 适配
设计图纸较小 320

百分比适配
页面比较少

媒体选择器(响应式布局)
在不同的屏幕上,页面布局不一样

具体像素
dpr = 2 = 物理像素/CSS 像素

转载请注明:XAMPP中文组官网 » 移动端的适配及布局

您必须 登录 才能发表评论!