移动端基础之bootstrap(四)

最新推荐文章于 2024-02-06 12:02:42 发布

VIP文章「已注销」

最新推荐文章于 2024-02-06 12:02:42 发布

阅读量993

点赞数

分类专栏： # 移动端基础文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_45419127/article/details/116795468

版权

响应式原理

使用媒体查询针对于不同宽度的设备进行样式和布局的设置，从而适应不同的设备

设备的划分

小于768的为超小屏幕（手机）
768~992之间的为小屏设备（平板）
992~1200的中等屏幕（桌面显示器）
大于1200的大屏设备（大桌面显示器）

注意：响应式需要一个父级元素作为容器，配合子级元素来实现更多效果

父容器版心尺寸划分

超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

<!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>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        .container {
            height: 60px;
            margin: 0 auto;
        }
        /* 小于768的设备  版心宽度设置为100% */
        
        @media screen and (max-width:767px) {
            .container {
                width: 100%;
                background-color: red;
            }
        }
        /* 大于768的设备  版心宽度设置为750px */
        
        @media screen and (min-width:768px) {
            .container {
                width: 750px;
                background-color: purple;
            }
        }
        /* 大于992的设备   版心宽度设置为970*/
        
        @media screen and (min-width:992px) {
            .container {
                width: 970px;
                background-color: crimson;
            }
        }
        /* 大于1200的设备 版心宽度设置为1170 */
        
        @media screen and (min-width:1200px) {
            .container {
                width: 1170px;
                background-color: green;
            }
        }
    </style>
</head>

<body>
    <div class="container"></div>
</body>

</html>

在这里插入图片描述

导航栏案例

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            box-sizing: border-box;
            height: 50px;
            margin: 0 auto;
            text-align: center;
            line-height: 50px;
        }
        
        ul {
            list-style: none;
        }
        
        li {
            box-sizing: border-box;
            float: left;
            border: 1px solid #ccc;
        }
        
        @media screen and (max-width:767px) {
            .container {
                width: 100%;
            }
            .container li {
                width: 100%;
                margin: 5px;
                background-color: purple;
            }
        }
        
        @media screen and (min-width:768px) {
            .container {
                width: 100%;
            }
            .container li {
                width: 50%;
                margin-top: 5px;
                background-color: green;
            }
        }
        
        @media screen and (min-width:997px) {
            .container {
                width: 100%;
            }
            .container li {
                width: 33.3%;
                margin-top: 5px;
                background-color: yellow;
            }
        }
        
        @media screen and (min-width:1200px) {
            .container {
                width: 100%;
            }
            .container li {
                width: 25%;
                margin-top: 5px;
                background-color: yellow;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>百度</li>
            <li>新浪</li>
            <li>腾讯</li>
            <li>网易</li>
            <li>谷歌</li>
            <li>搜狐</li>
            <li>微软</li>
            <li>小米</li>
            <li>雅虎</li>
        </ul>
    </div>
</body>

</html>

在这里插入图片描述

bootstarp

bootstrap简介

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

官网：www.bootcss.com/

框架：顾名思义就是一套架构

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端基础之bootstrap(四)

响应式原理使用媒体查询针对于不同宽度的设备进行样式和布局的设置，从而适应不同的设备设备的划分小于768的为超小屏幕（手机）768~992之间的为小屏设备（平板）992~1200的中等屏幕（桌面显示器）大于1200的大屏设备（大桌面显示器）注意：响应式需要一个父级元素作为容器，配合子级元素来实现更多效果父容器版心尺寸划分超小屏幕（手机，小于 768px）：设置宽度为 100%小屏幕（平板，大于等于 768px）：设置宽度为 750px中等屏幕（桌面显示器，大于等于 992px
复制链接

扫一扫