快速理解css响应式

最新推荐文章于 2024-03-18 15:07:55 发布

_阿锋丶

最新推荐文章于 2024-03-18 15:07:55 发布

阅读量226

点赞数

分类专栏： html css 前端天天面试题积累

本文链接：https://blog.csdn.net/weixin_43342105/article/details/107242244

版权

html css 同时被 2 个专栏收录

29 篇文章 17 订阅

订阅专栏

前端天天面试题积累

25 篇文章 4 订阅

订阅专栏

文章目录

rem，em是什么

在这里插入图片描述
rem就是响应式的重要单位

响应式布局的常用方案

下面代码就是对字体实现了响应式，在屏幕宽度<374px的情形下，根元素的字体大小是86px，在>375和<413px的情形下根元素的字体是86px，在大于414px情形下更元素字体大小为110px，所以div中的字体分别为0.1686 0.16100 0.16*110

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

    /* 对字体实现响应式 */
    @media only screen and (max-width: 374px){
        /* iphone5或者更小的尺寸，以iphone5的宽度（320px)比例设置font-size */
        html{
            font-size:86px;
        }
    }

    @media only screen and (min-width:375px) and (max-width:413px){
        /* iphone6/7/8和iphomeX */
        html{
            font-size: 100px;
        }
    }

    @media only screen  and (min-width:414px){
        html{
            font-size: 110px;
        }
    }

    body{
        font-size: 0.16rem;
    }

    #div1{
        width: 1rem;
    }

</style>
<body>
    <div id="div1">乘风破浪会有时</div>
</body>
</html>

响应式 vm/vh

rem的弊端

rem的弊端就是具有阶梯型，分等级的排列，像上一个响应式的例子就是分374 413 两个接线，三个台阶

什么是网页视口尺寸

在这里插入图片描述

vw/vh

在这里插入图片描述

在这里插入图片描述 两者就是上面的vm和vh

_阿锋丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
快速理解css响应式

文章目录rem，em是什么响应式布局的常用方案响应式 vm/vhrem的弊端什么是网页视口尺寸vw/vhrem，em是什么rem就是响应式的重要单位响应式布局的常用方案下面代码就是对字体实现了响应式，在屏幕宽度<374px的情形下，根元素的字体大小是86px，在>375和<413px的情形下根元素的字体是86px，在大于414px情形下更元素字体大小为110px，所以div中的字体分别为0.1686 0.16100 0.16*110<!DOCTYPE html&
复制链接

扫一扫