前端移动Web第四天知识点：响应式布局（bootstrap框架）

最新推荐文章于 2024-03-18 15:04:39 发布

库库好困

最新推荐文章于 2024-03-18 15:04:39 发布

阅读量364

点赞数

分类专栏：一：移动WEB学习（看视频）文章标签： css java html web

本文链接：https://blog.csdn.net/m0_46597922/article/details/105624086

版权

1.响应式开发

1.1 响应式开发原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
在这里插入图片描述

1.2 响应式布局容器

1.响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
2.原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

平时我们的响应式尺寸划分

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

但是我们也可以根据实际情况自己定义划分

案例：响应式导航

在这里插入图片描述
案例：需求分析
① 当我们屏幕大于等于800像素，我们给nav宽度为800px，因为里面子盒子需要浮动，所以nav需要清除浮动。
② nav里面包含8个小li 盒子，每个盒子的宽度定为 100px，高度为 30px，浮动一行显示。
③ 当我们屏幕缩放，宽度小于800像素的时候， nav盒子宽度修改为 100% 宽度。
④ nav里面的8个小li，宽度修改为 33.33%，这样一行就只能显示3个小li ，剩余下行显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
    
            margin: 0;
            padding: 0;
        }
        ul {
    
            list-style: none;
        }
        .container {
    
            width: 800px;
            margin: 0 auto;
        }
        .container ul li {
    
            float: left;
            color: #fff;
            background-color

最低0.47元/天解锁文章

库库好困

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端移动Web第四天知识点：响应式布局（bootstrap框架）

1.响应式开发1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。1.2 响应式布局容器1.响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。2.原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。平时我们的响应式尺寸划分超小屏...
复制链接

扫一扫