移动端

花匠小妙招
2024-11-26 04:26

视口和像素、响应式布局及em / rem

视口和像素 meta标签：

告诉浏览器一些设置信息
是设置理想视口的重要元素，主要用于将布局视口的尺寸和理想视口的尺寸相匹配
移动端布局必须写

meta视口标签存在5个指令
width: 设置布局视口的宽度，一般都是device-width(设备宽度)
initial-scale: 初始缩放比例。 1即是100%， 2是200% ，以此类推
maximum-scale: 最大缩放比例
minimum-scale: 最小缩放比例
user-scalable：是否允许用户缩放

1）随着时代的发展，在移动端上访问pc端的页面，逐渐变的常态化
2）手机的设备尺寸，碎片化越来越严重
碎片化：种类繁多，五花八门

移动端的测试方式：

1）谷歌浏览器提供的虚拟机
2）电脑和手机在同一局域网内，扫描编译器提供的二维码，即可在手机上查看
3）搭建本地服务器，来建立访问

三种视口：

1）布局视口：布局视口一般都是浏览器厂商给的一个固定值，布局视口是看不见的，浏览器厂商设置的一个固定值，如980px，并将980px的内容缩放到手机屏内。
2）视觉视口：浏览器可视区域的大小，也就是用户可以通过设备宽度看到的内容
3）理想视口：布局视口虽然解决了移动端查看pc端网页的问题，但是完全忽略了手机本身的尺寸。
所以苹果引入了理想视口，它对设备来说是最理想的布局视口，
用户不需要对页面进行缩放就能完美的显示整个页面。
最简单的做法就是使布局视口宽度改成屏幕的宽度。

两个像素： css像素(独立像素,逻辑像素) : 在CSS、JS中使用的一个长度单位。单位px
注：在pc端1物理像素等于1px，但是移动端1物理像素不一定等于1px物理像素：屏幕的物理像素，又被称为设备像素，他是显示设备中一个最微小的物理部件。
任何设备屏幕的物理像素出厂时就确定了，且固定不变的设备像素比：

简称为dpr，它是物理像素和独立像素的对应关系(也就是比例)
备注：判断是否为高清时，看一下dpr的值是否大于1。一般情况下dpr为整数，但是一些安卓的机型不为整数(奇葩)
通过：window.devicePixelRatio获得

console.log(window.devicePixelRatio); 1 响应式布局移动端开发的两种主流方案之一响应式布局兼容内容没有受到明显影响时，自适应宽高即可内容受到明显的影响时，改变布局，来保证内容的清晰声明关键字 @media

当 screen的屏幕尺寸符合指定的尺寸时，执行指定的样式

screen：设备的类型and : 关键字 (连接，指定)( ) : 媒体特性(就是屏幕尺寸){ } ：指定的样式max-width: 屏幕小于等于指定尺寸时触发 (最多)min-width: 屏幕大于等于指定尺寸时触发 (最少)

响应式布局: 用于解决不同浏览器,不同分辨率以及不同设备的不同显示效果

优点面对不同分辨率的设备灵活性很强能够快捷的解决多设备显示适应的问题缺点兼容各种设备工作量大,效率低,页面加载时间长一定程度上,会改变网站原有的布局结构,可能会出现用户混淆问题

@media only screen and (min-width: 1200px) and (max-width: 1440px) {.all{display: flex;flex-wrap: wrap;height: 400px;background-color: gainsboro;}.box{width: 20%;height: 200px;border-radius: 50%;line-height: 200px;background-color: yellow;justify-content: space-around;text-align: center;}}

123456789101112131415161718 移动端开发的两种主流方案之二单独制作移动端的页面 em / rem em

是一个相对的距离单位
参考父级的font-size
1em == 父级的 1 * font-size

备注：em 通过自身父级的字体大小，会转换为px公式：实际px == 1em * 父级的字体大小优点：方便我们设置段落间隙缺点：当嵌套多层的时候，需要自己去计算 rem

和em基本类似，区别点在于：

em相对自身父级的字体rem只相对html的字体大小

rem: root-em 根元素的em值, html的字体大小
rem 计算公式

屏幕的宽度(设计稿通常是750) / 份数(20) = html的字体大小(1rem的大小)元素的尺寸 / 1rem的值 = 实际的rem值(要写在元素样式上的值)

onresize
测试时使用

window.onresize = function (ev) {//一些浏览器中，无法获取到documentElement, 所以去获取bodyvar htmlWidth =document.documentElement.clientWidth || document.body.clientWidth;//获取html 便于下面设置html的字体大小var html = document.querySelector("html");// 设置根元素的字体大小html.style.fontSize = htmlWidth / 20 +'px';} 123456789101112