响应式布局以及CSS布局

咩Kakao

已于 2022-08-27 15:26:45 修改

阅读量379

点赞数

分类专栏： CSS 文章标签： css css3 html

于 2022-08-27 15:21:41 首次发布

本文链接：https://blog.csdn.net/weixin_52142992/article/details/126558328

版权

本文详细介绍了响应式布局，包括视口配置和@media的应用，以及不同屏幕尺寸的适配策略。接着探讨了CSS布局，如静态布局的简单与局限，流式布局的原理，圣杯布局和双飞翼布局的实现细节，以及网格布局的重要性。

摘要由CSDN通过智能技术生成

（一）响应式布局

1、视口配置viewport

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
</head>

2、应用

响应式布局核心: @media
响应式布局的常用尺寸
超小屏幕：（手机，小于768px）
小屏幕：（平板，大于等于768px）
中等屏幕：（桌面显示器，大于等于992px）
大屏幕：（大桌面显示器，大于等于1200px）

<!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>Document</title>
    <style>
        @media (min-width: 1200px) {
      

         } 
        /* 平板电脑和小屏电脑之间的分辨率 */
        @media (min-width: 768px) and (max-width: 979px) {
      

        } 
        /* 横向放置的手机和竖向放置的平板之间的分辨率 */
        @media (max-width: 767px) {
      

        }
        /* 横向放置的手机及分辨率更小的设备 */
        @media (max-width: 480px) {
      
            
        }

        /* 应用 ：屏幕小于480px的时候改变颜色*/
        body {
     
            background-color: pink;
        }

        @media screen and (min-width: 480px) {
     
            body {
     
                background-color: lightgreen;
            }
        }
    </style>
</head>