em/rem以及大小屏适配、媒体查询

最新推荐文章于 2024-06-22 14:11:27 发布

执键书生

最新推荐文章于 2024-06-22 14:11:27 发布

阅读量485

点赞数 1

文章标签： css javascript html

本文链接：https://blog.csdn.net/weixin_44761231/article/details/116723809

版权

em/rem以及大小屏适配、媒体查询

#1、px:

一个盒子是100px ×100px：px指的是逻辑像素，也叫css像素。
在适配时，使用px作为单位并不合适。

#2、em:

指的是一个字的宽度，2em表示两个字的宽度
1em = 1个font-size的大小
如：font-size:20px; 1em = 20px 10em = 200px

em的不足：它是相对于父元素的font-size来说的。

适配时，使用em也不合适，因为它一直是相对于父元素的font-size来说的。

#3、rem:

r表示root（根），指html标签

1rem ==> html标签中的font-size的大小
1em ==> 父标签中的font-size的大小

如：html标签的font-size设置成了34px ：
1rem = 34px
2rem = 68px
3rem = 102px

#4、适配：

在大屏上显示大盒子，在小屏上显示小盒子。

如果是大屏，盒子或字体大上设置的大一点
如果是小屏，盒子或字体大小设置的小一点

即，10个字，在不同的手机，都是撑满一行。

#5、适配的方法：(媒体查询+rem适配；Js+rem适配)

①媒体查询+rem适配：

媒体查询+rem适配步骤：

(1）得到设计稿尺寸是750px

(2）把浏览器的模拟器也调整成750px

(3）严格按照设计稿，以rem为单位，把设计稿还原出来

(4）开始写样式，需要确定html标签的font-size，通常我会把fontsize定成100px，叫rem的基准值。

1rem = 100px。

盒子的宽度是20px；换成rem是0.2rem。

盒子的宽度是55px，换成rem是0.55rem。

(5）把写好的页面，迁移到其它屏上的，完成适配。

在迁移时也需要换算：

在750px的屏上，html的font-size的大小为100px。

在375px的屏上，html的font-size的大小为50px。

在320px的屏上，html的font-size的大小为42.6666666px。

在414px的屏上，html的font-size的大小为55.2px。

<!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>
        * { 
			margin: 0;padding: 0; 
		}
        @media only screen and (width:750px) { 
            html { 
                font-size: 100px; 
            } 
        }
        @media only screen and (width:375px) { 
            html { 
                font-size: 50px; 
            } 
        }
        @media only screen and (width:320px) { 
            html { 
                font-size: 42.6666px; 
            } 
        }
        @media only screen and (width:414px) { 
            html { 
                font-size: 55.2px; 
            } 
        }
        .title { 
            font-size: 0.75rem; 
        }
        img { 
            width: 3.75rem; 
        }
    </style>
</head>
<body>
    <div class="title">国破山河在城春草木深</div>
    <!-- 默认情况下，图片多大，在手机上显示多大 -->
    <img src="./01.png" alt="">
</body>
</html>

②Js+rem适配：

<!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>
        * { 
            margin: 0;
            padding: 0; 
        }
        .title { 
            font-size: 0.75rem; 
        }
        img { 
            width: 3.75rem; 
        }
    </style>
</head>
<body>
    <div class="title">国破山河在城春草木深</div>
    <!-- 默认情况下，图片多大，在手机上显示多大 -->
    <img src="./01.png" alt="">
    <script>
        let docEle = window.document.documentElement; // 表示获取窗口

        // 此函数是计算不同屏的html标签的font-size
        function refresh(){
            // width 表示手机屏的宽度
            let width = docEle.getBoundingClientRect().width; // 一屏的宽度 
            if(width>750){  width=750 }
            let fs = width / 7.5
            document.querySelector("html").style.fontSize = fs + "px"
        }

        refresh();  

        // window叫事件源   addEventListenere用来绑定事件的
        // resize叫浏览器窗口大小改变事件  ()=>{}叫事件监听器
        window.addEventListener("resize",()=>{
            refresh()
        })
        // pageshow 页面显示出来
        window.addEventListener("pageshow",()=>{
            refresh()
        })
    </script>
</body>
</html>

执键书生

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
em/rem以及大小屏适配、媒体查询

em/rem以及大小屏适配#1、px:一个盒子是100px ×100px：px指的是逻辑像素，也叫css像素。在适配时，使用px作为单位并不合适。#2、em:指的是一个字的宽度，2em表示两个字的宽度1em = 1个font-size的大小如：font-size:20px; 1em = 20px 10em = 200pxem的不足：它是相对于父元素的font-size来说的。适配时，使用em也不合适，因为它一直是相对于父元素的font-size来说的。#3、rem:r表
复制链接

扫一扫