移动端的布局

我是打工人

已于 2022-06-26 21:56:32 修改

阅读量387

点赞数 2

文章标签： java 服务器前端

于 2022-06-22 16:23:14 首次发布

本文链接：https://blog.csdn.net/szydqq/article/details/125378450

版权

一、多列===按照列划分区域

①column-count:===写列得个数===>按照几列划分布局

=推荐这个，不使用列宽，定了列数之后，系统自动分配列宽

②column-gap===划分列与列之间的间距

一般不调整··

③column-width:====调整列宽（会与列数发生冲突）

一般不调整

④column-rule-color:red；结合column--rule-width：数字； column-rule-style：soild；一起使用。

出现列线和列线得颜色，一般不调整

简写：column-rule：10px solid red；

⑤column-fill：；===规定列高如何填充得

取值：auto：列高度自适应，尽量让每一列得高度填充满每一个父盒子，到最后可能会出现填充不满得现象

balance：尽量让每一列得高一致，可能会出现每一列得高度都填充不满父亲盒子
（默认值）

⑥column-span:标题是否横跨列

all：横跨所有得列

不写只会在第一列展示，，默认值

⑦瀑布流中出现断层-解决问题：break-inside: avoid;

二、媒体查询：可以实现响应式布局

①响应式布局：就是根据设备改变时，展示不同得分布结果

②媒体查询：可以检测设备是否发生改变（用来检测设备得宽度或者高度是否发生改变，一般都是检测宽度得）

③语法：@media all and (min-width:700px){
                           body{background-color:pink;
                                                }
                注意：空格得使用

语义：利用媒体查询检测所有设备并且要求设备得宽度大于等于700px，就让背景颜色变成粉色

④检测横竖屏代码

检测横屏的
                        @media all and (orientation: landscape){
                        body{
                                background-color:■red;
                                }
                /*检测竖屏的*/
                @media all and (orientation: portrait ){
                            body{
                                   background-color:■blue;
                        }

⑤rem单位（移动端中常用的单位）

它是一个相对单位，相对于html字号而言的，例如html是16px，那么1rem=16px，2rem=32px，只要html的字号改变，rem也会改变。

移动端中不使用px，因为他是死单位，不能随着页面的缩放而改变

⑤移动端适配的原理（面试题）：

做移动端适配:要求元素的大小要跟着设备发生改变，设备如果大元素就大，设备如果小，元素就小。

要想完成移动端的适配，我们需要借功媒体查询和rem单位来达到适配( 自适应)的目的。

如果设备宽度大了，就让html字号大一一点。如果设备宽度小了，就让htm1的字号小一点。

如果htm1的字号一且发生改变，rem单位就会跟着改变。

所以一股做移动端的时候要求写布局的时候用的单位最好足rem单位。

三、移动端的基础知识

了解概念

①一般我们制作移动端常见的设备都是iphone

常见的设备有iphone5===320*568，iphone678==375*667，iPhone plus==414*736，iphoneX==375*812

②设计稿的大小（截图）

常见的iphone5（640*1136）==dpr为2倍，iphone678==750*1334==dpr为2倍，iPhone plus==1242*2208，dpr为3倍，iphoneX==1125*2436，dpr为3倍

③设备像素比（dpr）==设备像素/设备独立像素=设计稿大小/设备的真实大小

设备像素（物理像素）：真实设计稿。有多少个像素点，ps量取的大小

设备独立像素（逻辑/虚拟/css像素）：设备的真实大小，开发人员写的css像素
④做移动端的时候因为设计搞一般比设备真实大小要大，所以我们将来用ps量取的大小肯定是偏大的，所以我破门的代码中到底需要多少px需要我们自己计算

计算规则：开发人员需要的css的像素：=ps量取的大小/dpr

⑤视口：

布局视口：超大视口（看不见）

视觉视口：设备视口

理想视口：要求千俩种视口呈现1：1的效果

如何让视口变成理想视口：代码： <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

⑥阿里巴巴字体图标库：字体图标，看着是图其实是文字，所以他就拥有和文字相关样式（加粗，大小，颜色）

⑦盒子模型

标准盒子（默认值）：语法：box-sizing：conent-box;自己定义的width指的是内容去的宽度，所以写了内间距和边框线之后会导致把盒子撑大。

怪异盒子：语法：box-sizing:border-box;自己定义的width指的是盒子的总宽度，写了内间距和边框线之后就不会导致盒子撑大（而是内容区自动变小）

四、移动端的设计布局

①使用媒体布局

如下准备代码：

@media all and (max-width:320px){
    html{
        font-size: 16px;
    }
}
@media all and (min-width:321px) and (max-width:376px){
    html{
        font-size: 18px;
    }
}
@media all and (min-width:377px){
    html{
        font-size: 20px;
    }
}


html,body{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
}

②使用适配器布局

准备知识：

一、vw====view width(视口的宽度)

vh====view height(视口的高度)

视口===我们真实能看见的区域（设备的真实大小）

vw和vh是一个单位，也是一个相对单位，他是相对于视口而言的

100vw=视口的宽度

100vh=视口的高度

二、假设设备宽度是320的，视口的宽度就是320的

那么100vw=320px

那么1vw=3.2px

三、假设设备宽度是375的，视口宽是375

那么100vw=375px

那么1vw=3.75px

四、假设设备的高度是1080，视口的高是1080

那么100vh=1080px

那么1vh=10.8px

五、假设我现在的设备是iphoneX，请问视口的宽度是375px，视口的高度是812px

所以100vw=375px 100vh=812px

注意：

①如果做移动端想实现实时适配（设备发生一丁点改变，元素也要跟着改变），要想实现实时适配必须借助vw和rem单位来实现。

②要想实现实时适配，我们需要让html字号的单位写成vw单位，只要视口宽度发生改变，那么vw一定是会改变的，vw变了字号就变了，字号变了rem就变了

③将来我们的html字号到底写多少个vw比较合适呢？（需要看公司领导）

目前做的时候最好让字号大于10px以上即可。

推算：

假设现在我要基于iphone5这个设备做项目，我们就知道视口的宽度是320px

所以100vw=320px 1vw=3.2px

假设我们的字号基于16px来做，那么我们就需要讲16px转成vw单位

16px=？vw 5vw

代码布局：

html{
    font-size: 5.33vw;
}
/* 隐藏滚动条 */
::-webkit-scrollbar{
    display: none;
}
/* ========布局========== */
html,body{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
}