前端页面布局方式与响应式布局

最新推荐文章于 2024-05-03 00:02:41 发布

云杰8了

最新推荐文章于 2024-05-03 00:02:41 发布

阅读量324

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_50821119/article/details/111603684

版权

css3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

前端页面布局方式

前端页面布局方式
- PC端布局

前端页面布局方式

小米工具栏响尾式布局下载地址
内容区域
内容区域一般有三种形式:

1 列：一般用于移动端
2 列：一般用于平板设备
3 列：一般用于 PC 桌面设备
在这里插入图片描述

PC端布局

两边宽固定，中间自适应，中间区域在HTML先行书写，便于先行渲染。
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。

圣杯布局

中心三栏布局，center，left，right全部浮动，父盒子设置清除浮动，center宽度100%，left，right固定宽200px，
left盒子利用左边margin-left: -100%;到center上的左边，right盒子利用 margin-left: -200px;到center盒子右边，
因为left和right会遮盖center，利用父盒子padding：0 200px，留出左右两边的200px，
然后利用left与right设置相对定位，左盒子left-200px，右边盒子rifht-200px位移到留白区域。

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            font-size: 50px;
            min-width: 620px;
            max-width: 1000px;
        }
        
        header,
        footer {
            width: 100%;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: tan;
        }
        
        .layer {
            padding: 0 200px;
        }
        
        .layer::after {
            content: "";
            display: block;
            clear: both;
        }
        
        .center {
            width: 100%;
            height: 300px;
            line-height: 300px;
            float: left;
            text-align: center;
            background-color: blue;
        }
        
        .left,
        .right {
            height: 300px;
            width: 200px;
            float: left;
            line-height: 300px;
            position: relative;
            background-color: thistle;
        }
        
        .left {
            margin-left: -100%;
            left: -200px;
        }
        
        .right {
            margin-left: -200px;
            right: -200px;
            background-color: tomato;
        }
     
    </style>
</head>

<body>
    <header>顶部</header>
    <div class="layer">
        <div class="center">中心</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    <footer>底部</footer>
</body>

双飞翼布局

中心盒子写前面，左边盒子，右边盒子和中心盒子全部浮动，中心盒子内嵌套一个内容盒子，内容盒子用左右margin值，挤开留出空白间隙，然后左边盒子margin-lrft值-100%，右边盒子用margin-left-盒子宽度。

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            font-size: 50px;
            min-width: 620px;
            max-width: 1000px;
        }
        
        header,
        footer {
            width: 100%;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: tan;
        }
        
        .content {
            margin: 0 200px;
        }
        
        .center {
            width: 100%;
            height: 300px;
            float: left;
            line-height: 300px;
            text-align: center;
            background-color: blue;
        }
        
        .left,
        .right {
            height: 300px;
            width: 200px;
            float: left;
            line-height: 300px;
            background-color: thistle;
        }
        
        .left {
            margin-left: -100%;
        }
        
        .right {
            margin-left: -200px;
        }
        
        footer {
            clear: both;
        }
    </style>
<body>
    <header>顶部</header>
    <div class="center">
        <div class="content">中心</div>
    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
    <footer>底部</footer>
</body>

弹性盒子布局

弹性盒子中心区域设置flex-grow为1，设置order属性，元素顺序。

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            font-size: 50px;
            min-width: 620px;
            max-width: 1000px;
        }
        
        .layer {
            width: 100%;
            display: flex;
        }
        
        .center {
            flex-grow: 1;
        }
        
        .left {
            order: -1;
        }
        
        header,
        footer {
            width: 100%;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: tan;
        }
        
        .center {
            width: 100%;
            height: 300px;
            line-height: 300px;
            text-align: center;
            background-color: blue;
        }
        
        .left,
        .right {
            height: 300px;
            width: 200px;
            line-height: 300px;
            background-color: thistle;
        }
        
        .right {
            background-color: tomato;
        }
    </style>
</head>

<body>
    <header>顶部</header>
    <div class="layer">
        <div class="center">中心</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    <footer>底部</footer>
</body>

响应式布局

首先必须了解多媒体查询。

多媒体查询

@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。

你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。

但是这些多媒体类型在很多设备上支持还不够友好。

媒体查询可用于检测很多事情，例如：

viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机横屏，竖屏) 。
分辨率
目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。

语法

@media  媒体类型 and (媒体功能) {
    CSS 代码...;
}

媒体类型

值	描述
all	用于所有设备
print	用于打印机和打印预览
projection	已废弃。用于投影设备
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备

媒体功能

值	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
grid	用来查询输出设备是否使用栅格或点阵。
height	定义输出设备中的页面可见区域高度。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color	定义输出设备每一组彩色原件的最大个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
max-width	定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color	定义输出设备每一组彩色原件的最小个数。
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
min-height	定义输出设备中的页面最小可见区域高度。
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率。
min-width	定义输出设备中的页面最小可见区域宽度。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序。
width	定义输出设备中的页面可见区域宽度。

云杰8了

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端页面布局方式与响应式布局

前端页面布局方式前端页面布局方式PC端布局圣杯布局双飞翼布局弹性盒子布局前端页面布局方式内容区域内容区域一般有三种形式:1 列：一般用于移动端2 列：一般用于平板设备3 列：一般用于 PC 桌面设备PC端布局两边宽固定，中间自适应，中间区域在HTML先行书写，便于先行渲染。圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。圣杯布局中心三栏布局，center，left，right全部浮动，父盒子设置清
复制链接

扫一扫