八、移动端：

最新推荐文章于 2024-05-31 14:49:19 发布

迷途小羔羊。

最新推荐文章于 2024-05-31 14:49:19 发布

阅读量576

点赞数 1

分类专栏：前端学习文章标签：前端移动端布局

本文链接：https://blog.csdn.net/Zzh1110/article/details/124082006

版权

前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.移动端基础：

1.1浏览器现状：
       PC端常见浏览器：谷歌、火狐、QQ、百度、搜狗、IE、360浏览器。
       移动端常见浏览器：UC、QQ、百度、360、谷歌等。
           国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核。
   1.2手机屏幕现状：
   1.3常见移动端屏幕尺寸：https://material.io/blog/device-metrics
   1.4移动端调试方法：
       总结：

2.视口：

视口：浏览器显示内容页面的屏幕区域。视口可以分为布局视口、视觉视口、理想视口。
   2.1 布局视口layout viewport：
   2.2 视觉视口visual viewport：
   2.3 理想视口ideal viewport：
   2.4 总结：
   2.5 meta视口标签：
   2.6 标准的viewport设置：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

3.二倍图：

3.1物理像素&物理像素比：

3.2 多倍图：
解决方法（以ipone8为例）：把100*100的图片手动缩小到50*50。
3.3 背景缩放background-size：

     div {
            width: 500px;
            height: 500px;
            border: 2px solid red;
            background: url(ldh.jpg) no-repeat;
            /* 1.只写一个参数 肯定是宽度 高度省略了 */
            /* background-size: 500px; */
            /* 2.里面的单位可以跟% 相对于父盒子来说 */
            /* background-size: 50%; */
            /* 3. cover 等比例拉伸 背景图片完全覆盖div盒子 可能有部分背景图片显示不全*/
            /* background-size: cover; */
            /* 4. contain 高度和宽度等比例拉伸,当宽度或者高度铺满div盒子就不再进行拉伸,可能有部分空白区域*/
            background-size: contain;
        }

3.4 背景二倍图及多倍图切图：
背景二倍图的原理跟上面一样，只是利用background-size来完成。

4.移动端开发选择：

4.1移动端主流方案：
   4.2单独移动端页面（主流）：通常情况下，域名前面加m（mobile）可以打开移动端。通过判断设备来实现移动端的跳转。
   4.3响应式兼容PC移动端：通过判断屏幕宽度来改变样式。
       缺点：制作麻烦，需要花很大精力去调兼容性问题。

5.移动端技术解决方案：

5.1移动端浏览器：
5.2 CSS初始化normalize.css：
5.3 CSS3盒子模型box-sizeing：

    <style>
        div:nth-child(1) {
            /* 传统盒子模型=width + padding +border  */
            box-sizing: content-box;
            width: 200px;
            height: 200px;
            background-color: skyblue;
            padding: 10px;
            border: 10px solid #000;
        }
        
        div:nth-child(2) {
            /* CSS3 盒子模型 */
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: yellow;
            padding: 10px;
            border: 10px solid #000;
        }
    </style>

5.4特殊样式：

6.移动端常见布局：

移动端技术选型：
6.1流式布局（百分比布局）：

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        section {
            width: 100%;
            max-width: 980px;
            min-width: 320px;
            margin: 0 auto;
        }
        
        section div {
            float: left;
            width: 50%;
            height: 400px;
        }
        
        section div:nth-child(1) {
            background-color: skyblue;
        }
        
        section div:nth-child(2) {
            background-color: yellow;
        }
    </style>
6.2flex布局：

       传统布局与flex布局：
       flex布局原理：
flex布局父项常见属性：
           1.flex-direction设置主轴的方向：
               （1）主轴与侧轴：
               （2）属性值：
    <style>
        div {
            /* 给父级添加flex属性 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: skyblue;
            /* 默认的主轴是x轴,行row,y轴就是侧轴*/
            /* 元素跟着主轴来排列的 */
            /* flex-direction: row; */
            /* 翻转,简单了解 */
            /* flex-direction: row-reverse; */
            /* 把主轴设置为y轴 */
            flex-direction: column;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: yellow;
        }
    </style>
2.justify-content设置主轴子元素排列：
（1）属性值：
    <style>
        div {
            /* 给父级添加flex属性 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: skyblue;
            /* 设置主轴上子元素的排列,默认从头部开始 */
            /* justify-content: flex-start; */
            /* 子元素排列从尾部开始 */
            /* justify-content: end; */
            /* 让子元素居中对齐 */
            /* justify-content: center; */
            /* 平均分配剩余空间 */
            /* justify-content: space-around; */
            /* 先两边贴边，再分配剩余空间 */
            justify-content: space-between;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: yellow;
        }
    </style>
3.flex-wrap设置子元素是否换行：
               （1）flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面。
               （2）换行代码：flex-wrap: wrap;
           4.align-items设置侧轴上的子元素排列方式（单行）：
               align-items: center;
           5.align-content设置侧轴子元素排列（多行）：
               align-content和align-items的区别：
           6.flex-flow属性是flex-direction和 flex-wrap属性的复合属性：
               flex-flow: column wrap;
       flex布局子项常见属性：
           flex属性定义子项目分配属于空间，用flex来表示占多少份数。
               flex属性使用：
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: skyblue;
            margin: 0 auto;
        }
        
        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }
        
        section div:nth-child(2) {
            flex: 1;
            background-color: green;
        }
        
        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }
        
        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: skyblue;
            margin: 100px auto;
        }
        
        p span {
            flex: 1;
        }
        
        p span:nth-child(2) {
            flex: 2;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <p>
        <span>1</span><span>2</span><span>3</span>
    </p>
</body>
align-self控制子项自己在侧轴上的排列方式。
           order属性：数值越小，排列越靠前，默认为0。

   6.3rem适配布局：

       （1）rem基础：
           rem的优点：通过修改html里面的文字大小来改变页面中元素的大小来实现整体控制。
       （2）媒体查询：CSS3新语法。
           @media针对不同的屏幕尺寸设置不同的样式。
           语法规范：
               mediatype媒体类型：
               关键字：
               媒体特性：
    <style>
        /* 背景变色 */
        /* 小于540px 页面时,背景颜色为蓝色 */
        @media screen and (max-width:539px) {
            body {
                background-color: skyblue;
            }
        }

        /* 当屏幕大于540且小于970时,背景颜色为红色(层叠性) */
        @media screen and (min-width:540px) {
            body {
                background-color: red;
            }
        }
        
        /* 页面大于970时,背景颜色为黄色 */
        @media screen and (min-width:970px) {
            body {
                background-color: yellow;
            }
        }
    </style>
（3）媒体查询+rem实现元素动态大小变化：
    <style>
        @media screen and (min-width:320px) {
            html {
                font-size: 50px;
            }
        }
        
        @media screen and (min-width:640px) {
            html {
                font-size: 100px;
            }
        }
        
        .top {
            height: 1rem;
            font-size: 0.5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
    </style>
（4）引入资源：针对不同的屏幕尺寸，调用不同的css文件。
       （5）Less基础：
           CSS的弊端：
           Less介绍：
           Less变量：
           Less编译：
           Less嵌套：
               子元素的样式直接写到父元素里面；
               如果有伪类、交集、伪元素选择器，我们内层选择器前面需要加&（不加则会当后代来看）。
           Less运算：

       （6）rem适配方案1原理：
           适配的目标是什么？如何达到这个目标？
           如何在实际开发中使用？
           元素大小取值方法：页面元素的rem值=页面元素值(px) / html font-size字体大小。
               或者：页面元素的rem值=页面元素值(px) / （屏幕宽度 / 划分的份数）
       （7）rem适配方案2原理：
           简洁高效的rem适配方案flexible.js：

   6.4响应式布局：

       （1）响应式开发原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
       （2）响应式布局容器：响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
           原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
    <style>
        .container {
            height: 150px;
            background-color: skyblue;
            margin: 0 auto;
        }
        /* 1.超小屏幕下 小于768,布局容器的宽度为100% */
        
        @media screen and (max-width:767px) {
            .container {
                width: 100%;
            }
        }
        /* 2.小屏幕下 大于等于768,布局容器改为750px */
        
        @media screen and (min-width:768px) {
            .container {
                width: 750px;
            }
        }
        /* 3.中等屏幕下 大于等于992px, 布局容器修改为970px */
        
        @media screen and (min-width:992px) {
            .container {
                width: 970px;
            }
        }
        /* 4.大屏幕下 大于等于1200px,布局容器修改为1170px */
        
        @media screen and (min-width:1200px) {
            .container {
                width: 1170px;
            }
        }
    </style>
</head>
<body>
    
    <div class="container"></div>
</body>
（3）Bootstrap开发框架：
           优点：
           Bootstrap使用：
布局容器：
       （4）Bootstrap栅格系统：
           栅格系统简介：
           栅格选项参数：
       （5）列嵌套：
       （6）列偏移：
       （7）列排序：
           bootstrap4.0以上已废弃该用法，转为order权重。
       （8）响应式工具：

迷途小羔羊。

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
八、移动端：

1.移动端基础： 1.1浏览器现状： PC端常见浏览器：谷歌、火狐、QQ、百度、搜狗、IE、360浏览器。移动端常见浏览器：UC、QQ、百度、360、谷歌等。国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核。 1.2手机屏幕现状： 1.3常见移动端屏幕尺寸：https://material.io/blog/device-metrics 1.4移动端调试方法：总结：2.视...
复制链接

扫一扫