前端基础面试之CSS响应式rem/vw/vh
Posted 泠泠在路上
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端基础面试之CSS响应式rem/vw/vh相关的知识,希望对你有一定的参考价值。
<style type="text/css">
html
font-size: 100px;/*根元素font-size的大小 也就是1rem的大小*/
div
background-color: #ccc;
margin-top: 10px;
font-size: 0.16rem;/*根据根元素得,1rem为100px,那0.16rem是16px*/
</style>
<style type="text/css">
@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 和 iphone x */
html
font-size: 100px;
@media only screen and (min-width: 414px)
/* iphone6p 或者更大的尺寸,以 iphone6p 的宽度(414px)比例设置 font-size */
html
font-size: 110px;
body
font-size: 0.16rem;
#div1
width: 1rem;
background-color: #ccc;
</style>
屏幕默认宽是100vw,长是100vh
#container
background-color: red;
width: 10vw;
height: 10vh;
以上是关于前端基础面试之CSS响应式rem/vw/vh的主要内容,如果未能解决你的问题,请参考以下文章