rem 布局

最新推荐文章于 2024-10-02 17:15:49 发布

风雨等归期

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量359

点赞数

分类专栏： html基础文章标签： html

本文链接：https://blog.csdn.net/liangmaxmin/article/details/106350890

版权

html基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

rem 布局可适用高度宽度和字体随着页面进行改变,而进行伸缩比例

1.rem 和em 的区别

##1.em 是相对于父元素的字体大小来说的
##2.rem 是相对于html元素字体大小来说的

rem 优点是可以通过修改html里面的文字大小来修改页面里面的元素大小

2.媒体查询
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*媒体查询一般是从小到大,或者是从大到小*/
    /*这句话的意思是,在我们的屏幕上 并且 最大宽度是800px 设置我们想要的样式*/
    /*max-width 小与等于800*/

    @media screen and (max-width: 639px ) {

        html {
            background-color: pink;
            font-size: 16px;
        }

    }

    @media screen and (min-width: 640px) and (max-width: 969px) {

        html {
            background-color: purple;
            font-size: 40px;
        }

    }

    @media screen and (min-width: 970px) {
        html {
            background-color: red;
            font-size: 60px;
        }

    }

    * {
        margin: 0;
        padding: 0;
    }

    div {
        height: 1rem;
        font-size: .5rem;
        background-color: white;
        line-height: 1rem;
        text-align: center;
    }


</style>
<body>
<div>rem布局</div>
</body>
</html>

引入资源
分别写两个css文件 , 用media判断屏幕的大小, 来选用不同的css文件

<link rel="stylesheet" href="style1.css" media="screen and (min-width:640px)">
<link rel="stylesheet" href="style2.css" media="screen and (min-width:840px)">

less安装

less可以实现css算数运算,
选择器要以嵌套的方式写入,
伪类选择器前要加& (&::hover)

npm install less

#使用条件
必须以@开头
变量名不能以数字开头
不能包含特殊字符
大小写敏感

flexible.js
是个自适应屏幕的框架,他会把屏幕平分成10等分,配合rem使用

注意若要限制自适应屏幕大小

 @media screen and (max-width: 750px){
        html{
           # !important提权
            font-size: 75px!important;
        }
    }

风雨等归期

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录