移动布局阶段总结【博学谷学习记录】超强总结，用心分享

最新推荐文章于 2022-09-03 21:06:40 发布

BTA_hjk

最新推荐文章于 2022-09-03 21:06:40 发布

阅读量215

点赞数

文章标签：学习 css javascript

本文链接：https://blog.csdn.net/brother_hu/article/details/126218641

版权

rem适配方案

原理：当设备尺寸发生改变的时候，等比例适配当前设备，.使用媒体查询根据不同设备按比例设置html的字体大小，页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化。
常见的设计稿：
phone 45 ： 640px
iphone 678 ：750px
Android ：常见320pX、360pX、375pX、384pX、400pX、414pX500p×、720pX ；大部分4.7~5寸的安卓设备为720pX
基本以750px为准
谷歌常手机模拟器默认设备

在这里插入图片描述

less+rem+媒体查询方案

结合less、rem和媒体查询三种技术，检测不同视口宽度，从而改变html字号影响rem。为了方便计算使用less预解释语言，这种方案还是比较繁琐。
总结：
①最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
②屏幕宽度/划分的份数就是 htmlfont-size 的大小
③或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

flexible.js+rem 方案(推举)

flexible.js相关资料
W3C
github资源
项目应用：
结构在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FC游乐园</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 主体内容 -->
    <div class="main">
        <!-- banner -->
        <div class="banner">
            <ul>
                <li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
            </ul>
        </div>

        <!-- 活动标题 -->
        <div class="title">
            <h4>乐园活动</h4>
        </div>

        <!-- 活动 -->
        <div class="item">
            <!-- 活动图 -->
            <div class="pic">
                <a href="#"><img src="./uploads/item_1.png" alt=""></a>
                <!-- 活动状态 -->
                <div class="status">进行中</div>
                <!-- 收藏 -->
                <div class="collect">
                    <i class="iconfont icon-shoucang1"></i>
                </div>
            </div>

            <!-- 活动介绍 -->
            <div class="info">
                <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                <div class="rest">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200人已报名</span>
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六开始</span>
                    </p>
                </div>
                <span class="type">免费</span>
            </div>
        </div>
         <!-- 底部工具栏 -->
    <div class="toolbar">
        <a href="#" class="current">
            <i class="iconfont icon-index-copy"></i>
            <span>首页</span>
        </a>
        <a href="#">
            <i class="iconfont icon-youhuiquan"></i>
            <span>卡券</span>
        </a>
        <a href="#">
            <i class="iconfont icon-iconfront-"></i>
            <span>我的</span>
        </a>
    </div>

    <script src="./js/flexible.js"></script>
</body>
</html>

总结：应用flexble.js后不再需要关注移动适配的代码，只需要关注移动设备的布局即可，方便了许多。其中base.css是清除默认样式的代码，normalize.less提高兼容性的代码。

响应式布局

响应式开发原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置
设备的划分情况
小于768的为超小屏幕（手机）
768~992之间的为小屏设备（平板）
992~1200的中等屏幕（桌面显示器）
大于1200的宽屏设备（大桌面显示器）
响应式布局容器
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果
在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小
父容器版心的尺寸划分
超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

Bootstrap框架应用

它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件
bootstrap优点：
标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更简单，提高了开发的效率

基本使用

引入文件bootstrap.min.css即可使用框架的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BootStrap使用方法</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

    <style>
        div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

栅格系统的使用：

bootstrap栅格系统
一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局
基础应用
按照不同屏幕划分为12 等份
行（row）可以去除父容器作用15px的边距
xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
每一列默认有左右15像素的 padding
可以同时为一列指定多个设备的类名，以便划分不同份数例如 class=“col-md-4 col-sm-6”
栅格嵌套
栅格系统内置的栅格系统将内容再次嵌套
可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移

列排序
	通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
	
响应式工具

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>栅格系统</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">


    <style>
        .container div {
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 需求: 大屏: 一行排列4个内容; 中屏:一行排列2个内容 -->
    <div class="container">
        <div class="col-lg-3 col-md-6">1</div>
        <div class="col-lg-3 col-md-6">2</div>
        <div class="col-lg-3 col-md-6">3</div>
        <div class="col-lg-3 col-md-6">4</div>
    </div>
</body>
</html>