移动web入门

=^_^=银爪

于 2023-06-07 10:19:11 发布

阅读量60

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_65635437/article/details/131082206

版权

1. ==视口(viewport)简介==

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

布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页

视觉视口 visual viewport

字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定

理想视口，对设备来讲，是最理想的视口尺寸

需要手动添写meta视口标签通知浏览器操作

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

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

通过meta标签设置viewport来解决这个问题。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

name 要设置的属性，viewport对视口进行设置。

content 针对viewport设置那些内容。

width=device-width 作用是将要展示的页面布局的宽度与设备的宽度相同。
initial-scale=1.0 初始缩放为1(不缩放)
maximum-scale=1.0 最大的缩放比例(不缩放)
user-scalable=0 是否允许用户缩放

vscode快捷方式 meta:vp + tab

示例：未设置viewport

示例：设置viewport

2. 像素(屏幕像素)简介

物理像素&逻辑像素&物理像素比（dpr）

物理像素指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6 是 750* 1334

逻辑像素是一个抽象概念。就是我们写的css像素

我们开发时候的1px 不是一定等于1个物理像素的，物理像素与逻辑像素的比例称为物理像素比或设备像素比（dpr）

dpr = 物理像素 / 逻辑像素

现在市面常见的就是二倍屏和三倍屏 dpr=1 就是普通屏幕(1倍屏) dpr=2 就是高清屏幕(2倍屏) ppi>300 称之为视网膜屏幕 ppi（Pixels Per Inch）也叫像素密度，所表示的是每英寸所拥有的像素数量

假设我们css中的像素直接使用物理像素会怎么样？

假设在css中写了一段代码。一个div的width:12px; height:12px

不要使用css代码去演示如下示例。因为只要在机器上运行，就会进行了逻辑像素与物理像素的转换。以下示例只是理论。`

同样的一段代码，在不同的设备上显示的效果差别太大。这样的话非常不利于页面的布局(因为不知道页面是在哪种分辨率下展示)。

物理像素虽然是衡量屏幕的一个重要参数，但与前端人员几乎是没有关系的。前端人员会参照逻辑像素定义元素的长度、宽度等尺寸，所以逻辑像素又被称之为css像素。

移动端屏幕在显示我们的效果时，在读取我们css中的像素时后会根据物理像素比自动进行转换为相应的物理像素。

小结

:point_right: 移动设备上的物理像素、逻辑像素与设备像素比都是出厂是就已经确定的，无法更改的，也不能使用代码控制。

:point_right: 实际开发中，我们只需要考虑逻辑分辨率，不需要考虑物理分辨率。物理分辨率与逻辑分辨率的差距屏幕会自己根据比例进行转换。

3. 高清屏图像适配

3.1、图片特点

在进行移动端布局时，我们除了要知道逻辑像素进行适配屏幕宽度。

还需要知道不同的屏幕也需要不同的图像进行适配才能达到最好的效果。

图像的特点：放大会失真，缩小不会。

请看需求：

在一个页面有1个200px * 140px的图片区域。此页面即要在1倍屏幕上显示，又要在2倍屏幕上显示。那么请问，你要让ui人员设计多大分辨率的图片？是200 * 140还是400 * 280。我们需要让ui人员设计400 * 280分辨率的图片。

原因如下：

在dpr为1的普通屏幕上：由于1个css像素对应1个设备像素，此时可以正常显示
在dpr为2的高清屏莫上：由于1个css像素对应4个设备像素，相当于屏幕分辨率变大了，图片像素数没有变化，图像显示会失真。

结论：

:point_right: 对于高清屏幕需要适配高清图像，才可以展示最好的效果。所以DPR为2的设备上，为了更好的效果，我们要让UI提供400px*280px图片。

3.2、图片适配方案

移动端屏幕分为1倍屏(dpr=1)、2倍屏(dpr=2)、3倍屏(drp=3)，理论上ui应该对一个页面上的图片设计3套图片。

由于1倍屏几乎很少见了，所以正规公司UI只会切一套2倍图和一套3倍图，共两套图片。

对于小公司来讲，由于人眼无法区别出差别，一般就只切出一套2倍图。

1套图适配方案

如果是1套图适配方案，那么UI提供的都是二倍图，也就是如果页面图片的显示区域是200 * 140的，ui人员会将图片设计成400 * 280。那么前端人员的css代码方案应该如下：

img{
  width:200px;
  height:140px;
}

:point_right: 如果是1套图，UI的设计稿都是基于DPR为2的移动设备。UI提供的是二倍图，如果是二倍图css的尺寸需要除2。

多套图适配

<img src='1倍图片' srcset="2倍图片 2x, 3倍图片 3x"/>

srcset属性用于设置几倍屏使用几倍图片

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<link rel="stylesheet" href="">
<script></script>
<body>
 <img src="./imgs/sample.jpg" srcset="./imgs/sample@2x.jpg 2x, ./imgs/sample@3x.jpg 3x">
</body>
</html>

:point_right: 多套图或者是多倍图的作用就是让显示效果更清晰。

3.3背景图适配

背景缩放(背景大小) background-size

background-size 属性规定背景图像的尺寸

语法：

background-size:长度|百分比|cover|contain;

单位：长度|百分比|cover|contain;

cover会保持图像的纵横比，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

contain会保持图像的纵横比，把图像扩展至宽度或高度完全适应内容区域

4. 移动端布局流程

4.1 布局的流程

1.ui会设计效果图

ui人员会选择dpr为2的设备来设计效果图。常见的尺寸：640px、750px、960px :point_right: ui人员在设计效果图时，使用的是物理像素。

2.前端人员编码

前端人员在编码时，需要转换为逻辑像素。如果ui提供的是2倍的效果图，我们需要将所有的尺寸除2。宽、高、字体大小、内外边距。如果是pc端的设计稿就是按设计稿上的物理像素来书写css尺寸。

4.2 注意事项

水平方向不允许出现滚动条

元素宽度不能超过视口宽度禁止用户缩放

只进行宽度适配

页面整体宽度适配视口使用百分比单位，高度使用固定px或内容撑开 百分比布局也称之为流式布局，流式布局并不是一种新的布局技术

盒子采用内减模式 box-sizing:boder-box

盒子不受padding、border的影响避免出现滚动条。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 
  user-scalable=no控制用户不能缩放，如果缩放就会出现滚动条
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="">
<style>
  *{
      margin:0;
      padding:0;
  }
  
  div{
      /* 盒子的宽度不能大于视口的宽度，如果大于就会出现滚动条 */
      /* width:500px; */
      /* 宽度使用百分比，高度使用px或内容撑开 */
      width:100%;
      height:100px;
      background:red;

      padding:20px;
      /* 盒子采用内减模式，避免出现滚动条 */
      box-sizing: border-box;
      border:5px solid red;
  }
</style>
</head>
<body>
<div>
  hello
</div>

</body>
</html>

=^_^=银爪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动web入门

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口布局视口一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页视觉视口字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
复制链接

扫一扫