DAY 15 | 自学前端第十五天

最新推荐文章于 2022-10-11 20:11:11 发布

pangpangcm

最新推荐文章于 2022-10-11 20:11:11 发布

阅读量316

点赞数

分类专栏：前端自学笔记文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_39108774/article/details/124447590

版权

今天学习移动web开发——rem适配布局

目标：

能使用rem单位
能使用媒体查询的基本语法
能使用less的基本语法
能使用less中的嵌套
能使用less中的运算
能使用2种rem适配方案
能独立完成苏宁移动端首页

一、rem基础

页面文字能否随着屏幕大小变大而变大？
流式布局和flex布局主要针对宽度布局，那高度如何设置？
怎么让屏幕发生变化时，元素高度宽度等比例缩放？

1.1 rem单位

rem（root em）是一个相对单位，类似于em，em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如，根元素（html）设置font-size=12px，非根元素设置width=2em，则换成px表示就是24px

  <title>rem单位</title>
    <style>
        html {
            /* font-size: 15px; */
            font-size: 12px;
        }

        div {
            width: 15rem;
            height: 15rem;
            font-size: 12px;
            background-color: green;
        }

        p {
            /* 1 em是相对于父元素的字体大小来说的 */
            /* width: 10em;
            height: 10em; */

            /* 2 rem是相对于html元素的字体大小来说的 */
            /* 3 rem 优点：可以根据修改html里的文字大小来控制整体的大小 */
            width: 10rem;
            height: 10rem;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
</body>

二、媒体查询

怎么根据不同的屏幕宽度去修改html的font-size呢？

2.1 什么是媒体查询

媒体查询（Media Qurey）是css3最新语法

可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你设置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机，Android手机，平板等设备都用得到多媒体查询

2.2 语法规范

mediatype查询类型：all / print打印预览 / screen手机电脑屏幕
关键字：and多个媒体特性连接 / not排除 / only指定
媒体特性：width / min-width / max-width

 <title>媒体查询</title>
    <style>
        /* 这句话的意思是  在屏幕上并且最大的宽度是800像素 设置我们想要的样式 */
        @media screen and (max-width: 800px) {
            body {
                background-color: green;
            }
        }

        @media screen and (max-width:500px) {
            body {
                background-color: pink;
            }
        }
    </style>
</head>

<body>
</body>

案例：根据页面宽度改变背景颜色

页面小蓝色——页面变大绿色——再变大红色

@media screen and (min-width:551px) and (max-width:799px) {
            body {
                background-color: green;
            }

 <title>根据页面宽度改变背景颜色</title>
    <style>
        /* screen 和 and 不能省略 */
        @media screen and (max-width:550px) {
            body {
                background-color: blue;
            }
        }

        /* @media screen and (min-width:551px) and