CSS3移动端(介绍、Chrome DevTools、视口、倍图、backgroud-size、开发方案、CSS初始化、特殊样式)

最新推荐文章于 2024-08-15 21:59:30 发布

Bulut0907

最新推荐文章于 2024-08-15 21:59:30 发布

阅读量959

点赞数 15

分类专栏： CSS3 文章标签： CSS3移动端视口倍图 backgroud-size CSS初始化

本文链接：https://blog.csdn.net/yy8623977/article/details/133633710

版权

CSS3 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

本文详细介绍了移动端Web开发中的关键技术，包括如何使用ChromeDevTools进行调试，视口的三种类型及其应用，图片和背景图的倍图处理，以及CSS初始化和特殊样式的优化。开发者需关注像素比、视口设置和跨设备兼容性。

摘要由CSDN通过智能技术生成

1. 介绍

内核兼容:

国内的手机浏览器都是根据Webkit内核修改的，所以兼容移动端主流浏览器，处理Webkit内核浏览器即可

屏幕尺寸 + 像素分辨率 + 物理像素比:

不同型号的手机，屏幕尺寸不同、像素分辨率不同、物理像素比不同
- 如iphone 12 pro屏幕的像素分辨率为(1170 x 2532), 正常可以显示宽1170px像素和高2532px像素的内容。但其物理像素比为3(Retina视网膜屏幕显示技术)，则只可以显示宽390px像素和高844px像素的内容，这样3个物理像素点显示1px像素会更清晰

2. Chrome DevTools移动端调试

如下所示：

打开移动端的网页，点击调试区的移动端调试
选择手机型号。里面有个Edit可以选择更多手机型号
如图所示的宽390px像素，高844px像素，是我们开发能使用的内容像素
可以设置屏幕的缩放比例
可以对屏幕进行旋转

3. 视口

浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口、理想视口(重点)

3.1 布局视口layout viewport

针对设备: 将PC端的页面，直接在移动端显示，这样移动端看到的画面很小

3.2 视觉视口visual viewport

针对用户: 通过缩放和拖动页面，只看页面的一部分

3.3 理想视口ideal viewport

结合布局视口和视觉视口的优点。让屏幕能显示页面所有内容，而用户又不用缩放屏幕，就能看清所有内容

需要手动添加meta视口标签通知浏览器操作。让页面自动适配屏幕的高和宽。属性如下：
- width: 设置的是viewport宽度，可以设置为特殊值device-width，让视口宽度和设备宽度一样
- user-scalable: 用户是否可以缩放，yes(1)或no(0)
- initial-scale: 初始缩放比，大于0的数字
- maximum-scale: 最大缩放比，大于0的数字
- minimum-scale: 最小缩放比，大于0的数字

meta视口标签示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
</head>
<body>
  hello world
</body>
</html>

如果不使用viewpoint，看到的文字很小。使用viewpoint，因为像素比的原因所以看到的文字变大，看到的效果如下。**注意: **viewpoint的meta标签调试刷新页面可能无效，需要重新打开页面
viewpoint效果

4. 倍图

4.1 图片的倍图使用

放一张图片。由于像素比为3的原因:

如果放一张50px x 50px的图片。实际用150px x 150px的物理像素来展示图片，所以图片看起来很模糊
如果放一张150px x 150px的图片，即三倍图。再将图片缩小为50px x 50px，然后用150px x 150px的物理像素来展示图片，所以图片能正常的清晰显示

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>

    <style>
        img:nth-child(2) {
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <!-- 模糊的 -->
    <img src="images/apple50.jpg" alt="">
    <!-- 3倍图: 清晰的 -->
    <img src="images/apple150.jpg" alt="">
</body>
</html>

如下所示。第一张图片模糊，第二张图片清晰点
三倍图

4.2 背景图通过backgroud-size使用倍图

background-size: 背景图不能通过width和height进行缩放，可以通过backgroud-size来进行缩放

background-size: 500px 200px;: 设置背景图的宽度和高度
background-size: 500px;：设置背景图的宽度，高度等比例缩放
background-size: 50%;: 设置宽度为父盒子宽度的一半，高度等比例缩放
background-size: cover;: 等比例缩放，直到完全填满父盒子
background-size: contain;: 等比例缩放，直到宽或高之一填满父盒子

示例: 如果直接放背景图片，背景图片显示不全。通过backgroud-size对图片进行缩小，能显示全图片，而且能够满足屏幕像素比3的清晰度

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>

    <style>
        div {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            background: url(images/apple150.jpg) no-repeat;
            background-size: 50px 50px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果如下：

backgroud-size效果

4.3 精灵图作为背景图注意事项

这里以3倍图为例:

使用photoshop打开精灵图
在属性-变换的宽度中，将宽从600px改成一半为200px，高会等比例缩放
测量精灵图中的小图标偏移量，作为background背景图的x和y偏移量
background-size的宽也缩放为200px，高等比例缩放，如: background-size: 200px auto;

5. 开发方案

单独制作移动端页面(主流)
- 例如: 京东(https://m.jd.com)。打开https://www.jd.com/，判断设备为移动端，会自动跳转到https://m.jd.com
响应式页面兼容移动端
- 例如: 三星手机官网(https://www.samsung.com)。通过判断屏幕宽度来改变样式，以适应不同终端。缺点: 制作麻烦，需要花很大精力去调兼容性问题

6. CSS初始化

移动端CSS初始化和PC端不一样，推荐使用normalize.css，点我跳转官网，其优点:

保护了有价值的默认值
修复了浏览器的bug
是模块化的
拥有详细的文档

7. 特殊样式

-webkit-tap-highlight-color: transparent;: 移动端点击链接会高亮一下，设置为透明不高亮。需要【-webkit-】前缀
-webkit-touch-callout: none;: 长按页面时不弹出菜单。同样适用于img图片。需要【-webkit-】前缀
appearance: none;: 清除input输入框的样式

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>

    <style>
        a {
            /* 移动端点击链接会高亮一下，设置为透明不高亮。需要【-webkit-】前缀 */
            -webkit-tap-highlight-color: transparent;
            /* 长按页面时不弹出菜单。同样适用于img图片。需要【-webkit-】前缀 */
            -webkit-touch-callout: none;
        }

        input {
            /* 清除input输入框的样式 */
            appearance: none;
        
        }

    </style>
</head>
<body>
    <a href="#">我是一个链接</a>
    <input type="button" value="按钮">
</body>
</html>

显示效果如下：
特殊样式效果