移动端Web开发（一）移动端开发的基本概念

最新推荐文章于 2023-06-07 10:14:13 发布

Zijeak

最新推荐文章于 2023-06-07 10:14:13 发布

阅读量899

点赞数

分类专栏：前端移动端文章标签： css html5 web app

本文链接：https://blog.csdn.net/qq_18404993/article/details/108118778

版权

前端同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

移动端

2 篇文章 0 订阅

订阅专栏

文章目录

1.物理像素
2.CSS像素
3.设备像素比
4.缩放
5.PPI
6.视口Viewport
- 通过js获取视口宽度
- 通过js获取设备像素比
7.box-sizing
8.图标字体
9.Flex布局
10.媒体查询
11.移动端的常用单位

1.物理像素

物理像素（physical pixel）也叫设备像素（dp:device pixel），物理像素与设备相关，例如：19801080，1080720

2.CSS像素

CSS像素又称逻辑像素（logical pixel）或设备独立像素（dip:device independent pixel），它与设备无关，是实际开发中使用的像素，例如200px，100px
在这里插入图片描述

3.设备像素比

设备像素比（dpr:device pixel ratio）
dpr = 设备像素 / CSS像素（缩放比是1的情况下）
在这里插入图片描述
标清屏幕：dpr=1
高清屏幕：dpr>=2

4.缩放

缩放改变的是CSS像素的大小
放大：1CSS像素=1个物理像素 => 1CSS像素 = 22个物理像素
缩小：1CSS像素=1个物理像素 => 22CSS像素 = 1个物理像素

5.PPI

每英寸的物理像素点
ppi：pixels per inch
dpi：dots per inch
在这里插入图片描述

6.视口Viewport

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

initial-scale：缩放比例
user-scalable：是否允许用户缩放
maximun-scale=1,minimun-scale=1：相当于不允许用户缩放

通过js获取视口宽度

console.log(window.innerWidth);
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.getBoundingClientRect().width);

// 兼容性方案
var viewWidth = document.documentElement.clientWidth || window.innerWidth || document.documentElement.getBoundingClientRect().width;

通过js获取设备像素比

console.log(window.devicePixelRatio);

7.box-sizing

box-sizing有两个值：content-box（默认）和border-box
content-box：指定width和height属性为内容的宽和高，内容的宽和高永远不点，因此设置了内填充和边框，就会将容器大小撑开。
border-box：指定了width和height是从border开始计算的，因此容器的总大小是不变的，设置了内填充和边框之后，内容的大小就会被压缩。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximun-scale=1,minimun-scale=1">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <style>
       div{
           width: 200px;
           height: 200px;
           margin: 10px;
           background-color: blue;
       }
       img{
           display: inline-block;
           width: 100%;
           height: 100%;
       }
       .box2{
           box-sizing: content-box;
           padding: 10px;
       }
       .box3{
           box-sizing: border-box;
           padding: 10px;
       }
    </style>
</head>
<body>
    <div class="box1"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div>
    <div class="box2"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div>
    <div class="box3"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div>
</body>
<script>
</script>
</html>

在这里插入图片描述
对于padding，content-box会往外扩张，而border-box整体所占的位置大小不变，对于border也是如此。

box-sizing在移动端开发的应用：
box-sizing的默认值为content-box，这会导致我们稍微修改一下样式就可能会导致容器的大小发生改变，从而影响布局。因此，将box-sizing设置为border-box比较合适。
应用：css reset时将box-sizing设置为border-box

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

8.图标字体

在这里插入图片描述

9.Flex布局

10.媒体查询

10.1 什么是媒体查询media query

@media screen and (min-width:900px){
	background:red;
}

10.2 为什么需要媒体查询？

一套样式不可能适应各种大小的屏幕
针对不同的屏幕大小写样式
让我们的页面在不同大小的屏幕上都能正常显示

10.3 媒体类型

all(default)
screen（屏幕）/print（打印预览）/speech

10.4 媒体查询中的逻辑

and 与
, 或
not 非
not 的作用范围为后面所有连续的and，遇到,就会失效

10.5 媒体特征表达式

width
max-width
min-width
-webkit-device-pixel-ratio 设备像素比
-webkit-max-device-pixel-ratio
-webkit-min-decive-pixel-ratio
orientation：landscape（横屏）/partait（竖屏）

10.6 媒体查询策略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximun-scale=1,minimun-scale=1">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html{
            width: 100%;
        }
        .row{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }
        .col{
            width: 200px;
            height: 200px;
        }
        img{
            display: inline-block;
            width: 100%;
            height: 100%;
        }
        /* 断点 */
        /* xs:<576px;
        sm:567px-768px;
        md:768px-992px;
        lg:992px-1200px;
        xl:>1200px; */
        .col {
            width: 100%;
        }
        @media (min-width: 576px) {
            .col {
                width: 50%;
            }
        }
        @media (min-width: 768px) {
            .col {
                width: 25%;
            }
        }
        @media (min-width: 992px) {
            .col {
                width: 16.6666666667%;
            }
        }
        @media (min-width: 1200px) {
            .col {
                width: 8.33333333%;
            }
        }
    </style>
</head>
<body>
    <div class="row">
        <div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div>
        <div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div>
        <div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div>
        <div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div>
        <div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div>
        <div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div>
        <div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div>
        <div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div>
        <div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div>
        <div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div>
        <div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div>
        <div class="col"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1598881589&di=19342315765be497ba64a72d738d78b9&src=http://hbimg.b0.upaiyun.com/fd365c1b0e01b8e699b909145aec7b8f1b7eff047fac-C9FWMY_fw658"></div>
    </div>
</body>
<script>
</script>
</html>

11.移动端的常用单位

px：固定单位
%：自适应，相对单位
em：font-size of element，1em=font-size’s height，根据自身的字体大小计算，如果自身的font-size设置为em，会以父元素的font-size为基准进行计算。这个单位在进行首行缩进是十分方便。
rem：font-size of the root element，以根元素的font-size为基准计算。
vw：视口宽度的百分比，1vw = 1% of viewport width
vh：视口高度的百分比，1vh = 1% og viewport width

应用：使用rem做单位，将页面上的元素统一地进行等比例缩放

setRemUnit();

window.onresize = setRemUnit;
// 获取视口宽度
function setRemUnit(){
    var docElement = document.documentElement;
    var viewWidth = document.documentElement.clientWidth || window.innerWidth || document.documentElement.getBoundingClientRect().width;
    
    docElement.style.fontSize = viewWidth / 375 * 20 + 'px';
    // 1rem = 20px 在375px的视口宽度下
}

Zijeak

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
移动端Web开发（一）移动端开发的基本概念

1.物理像素物理像素（physical pixel）也叫设备像素（dp:device pixel），物理像素与设备相关，例如：19801080，10807202.CSS像素CSS像素又称逻辑像素（logical pixel）或设备独立像素（dip:device independent pixel），它与设备无关，是实际开发中使用的像素，例如200px，100px3.设备像素比设备像素比（dpr:device pixel ratio）dpr = 设备像素 / CSS像素（缩放比是1的情况下）
复制链接

扫一扫