移动端基础知识

最新推荐文章于 2021-08-29 11:48:13 发布

寒酥_

最新推荐文章于 2021-08-29 11:48:13 发布

阅读量203

点赞数

文章标签： android 经验分享 html css

本文链接：https://blog.csdn.net/weixin_49115895/article/details/112322559

版权

一、物理像素

整个屏幕是由一个个的点组成的，每个屏幕上的点组成的，每个屏幕上的点一定是有限的。那么这些有限的点就叫做像素，或者叫物理像素（physical pixel）

二、分辨率

分辨率=画面水平方向的像素值*画面垂直方向的像素值

屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素点个数越多，图像显示越精细

三、CSS中的 1px 并不等于设备的1px

从iphone4开始，推出了所谓的Retina屏，分辨率提高了一倍，变成640*960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，1个CSS像素是等于4个物理像素的。

四、逻辑像素

逻辑像素也叫css像素、设备独立像素（dpi：device independent pixel）

实际开发中使用的像素

.box{
    width:2px ;/*逻辑像素*/
    height:2px;/*逻辑像素*/
}

为了保证阅读体验的一致性，css像素可以自动在不同设备之间调节。
默认情况下，一个css像素等于一个物理像素的宽度。但是在高像素密度的设备上，css像素甚至在默认情况下相当于多个物理像素的尺寸。比如iPhone的屏幕对比一般的手机屏幕看起来更精致一些
iPhone6，7，8都是两倍屏手机，即一个css像素等于两个物理像素。iPhone6PLUS等于三倍屏手机。即一个csss像素等于3个物理像素
以iPhone6为例，设计稿给出一个图片的宽高为40 * 40，在实际开发中要除以2，宽高要写成20 * 20，因为iPhone6是两倍屏手机。

五、设备像素比

dpr：device pixel ratio

der = 设备像素/css像素

六、缩放

物理像素是不能改变大小的

缩放其实就是改变1css像素等于多少个物理像素，换言之，就是1个css像素需要用多少个物理像素表示

1、放大

分析：上面是放大2倍时的效果

原来，1个css像素=1个物理像素
放大2倍，就是让1个css像素的宽和高都放大2倍，所以我们看到在右边屏幕上，放大2倍后，1个css像素就占用了4个像素点
所以，放大2倍后，1个css像素=2x2个物理像素

2、缩小

分析：上面是缩小到1/2的效果

原来1个css像素=1个物理像素
缩小到1/2后，1个css像素的宽和高都缩小到原来的1/2，所以我们看到右边屏幕上，缩小后，4个css像素才等于1个css像素
所以，缩小1/2后，2x2个css像素=1个物理像素

七、二倍图

对于一张40×40的图片在标清屏下打开1css像素=1物理像素

如果在 Retina 屏幕中打开，在单一方向上，1css像素=2个物理像素，这样会造成图片模糊

解决方案就是使用倍图提高图片质量，解决在高清设备中存在的模糊问题

解决方法

比如希望在手机屏幕中显示一张100x100的图片
先制作一张200x200 的图片
通过css设置其逻辑尺寸为100x100
高清屏下手机浏览器会放大2倍显示，正好是200x200，正好是图片本身尺寸
注意：放大2倍，并不是图片的css尺寸放大2倍，而是使用2倍的物理像素点显示图片，会造成图片中的暗区等都爆露出来，造成模糊效果

八、视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分布为

布局视口
视觉视口
理想视口

1、布局视口（layout viewport）

早期的网页都是为pc端设置的，pc端屏幕相对手机屏幕要宽

为了在手机上也能够显示这些pc端专门设置的网页，出现了布局视口的概念

布局视口的宽度一般为980，也有1024

但手机屏幕要小很多，以iphone为例，屏幕宽度是375

那么就会出现下面的结果

2、视觉视口visual viewport

字面意思，他是用户正在看到的网站的区域。

3、理想是口ideal viewport

很明显，布局视口>视觉视口,所以会在视觉视口中出现滚动条，体验很差

理想视口，对设备来讲，是最理想的视口尺寸，为了使网站在移动端有最理想的浏览和阅读宽度而设定

需要设置meta标签进行设置

meta视口标签的主要目的：布局视口的宽度应该与理想视口的一致，简单理解就是设备有多宽，我们布局的视口就多宽

总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口

4、meta标签（理想视口决定）

4.1、宽度设置

<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>Document</title>
    <style>
        .box{
            width: 300px; 
            height: 300px;
            background-color: #000;         
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

需要设置如下代码

<meta name='viewport' content='width=device-width'>

让布局视口等于设备的宽度

4.2、缩放

页面在首次加载时，可能设置缩放比

<meta name='viewport' content='initial-scale=1'>

但是考虑到兼容性，仍然建议两个属性都要写

<meta name='viewport' content='width=device-width,initoal-scale=1.0'>

4.3用户缩放

手机端浏览器默认是允许用户通过触摸动作进行缩放的

可以通过下面的属性控制

user-scalable=no

或

aximum-scale=1,minimum=1

完整版

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum=1,user-scalable=no"/>

视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大允许的缩放比例1.0
=1


完整版

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum=1,user-scalable=no"/>

视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大允许的缩放比例1.0
最小允许的缩放比例1.0

寒酥_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端基础知识

一、物理像素整个屏幕是由一个个的点组成的，每个屏幕上的点组成的，每个屏幕上的点一定是有限的。那么这些有限的点就叫做像素，或者叫物理像素（physical pixel）二、分辨率分辨率=画面水平方向的像素值*画面垂直方向的像素值屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素点个数越多，图像显示越精细三、CSS中的 1px 并不等于设备的1px从iphone4开始，推出了所谓的Retina屏，分辨率提高了一倍，变成640*960，但屏幕尺寸却没变化，这就意味着
复制链接

扫一扫