rem的计算

简介: @media screen and (max-width: 1366px){html{font-size: 7px;}body{font-size: 7px;}}@media (min-wi...

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

html{

font-size: 7px;

}

body{

font-size: 7px;

}

}

@media (min-width: 1366px) and (max-width:1600px ){

html{

font-size: 8px;

}

body{

font-size: 8px;

}

}

@media screen and (min-width:1600px ){

html{

font-size: 10px;

}

body{

font-size: 10px;

}

}

 

 

 

 

/***************************************以上代码代表的是******************************************/

在1366的屏幕下

1rem = 7px;

在1366px-至1600px的屏幕下

1rem = 8px;

在1600以上的屏幕下

1rem = 10px;

 

/********************************************************************************************************/

相关文章
|
6月前
vw、px、vh 和 rem应用场景以及区别
【4月更文挑战第2天】 vw、px、vh 和 rem应用场景以及区别
843 10
|
前端开发
常用单位 px像素 %百分比 rem em vw vh pt磅值
常用单位 px像素 %百分比 rem em vw vh pt磅值
|
4月前
|
编解码 前端开发
CSS【详解】长度单位 ( px,%,em,rem,vw,vh,vmin,vmax,ex,ch )
CSS【详解】长度单位 ( px,%,em,rem,vw,vh,vmin,vmax,ex,ch )
55 0
|
6月前
|
编解码 图形学 计算机视觉
viewpoint与rem、百分比、px 基础与面试题:viewpoint 与 rem、百分比高度、px
该文档介绍了网页设计中的尺寸单位,包括`viewpoint`、`rem`、百分比和像素`px`的概念和差异。`viewpoint`(如`vw/vh`)基于用户视口大小,常用于移动端适配;`rem`相对于根元素字体大小,适合做响应式设计;百分比相对于父元素尺寸,两者在响应式和基准上有所不同;像素`px`是图像和数字图形的基本单位,常用于精确布局。像素密度(PPI)影响图像清晰度,不同设备中像素表现形式不一。
|
6月前
|
前端开发 容器
rem和vw之间有什么区别吗
【4月更文挑战第2天】 rem和vw之间有什么区别吗
91 8
|
6月前
|
编解码 前端开发
CSS 的数值与单位px\em\%
CSS 的数值与单位px\em\%
|
6月前
|
编解码
px,em,rem,vw,vh之间的区别
px,em,rem,vw,vh之间的区别
|
6月前
|
编解码 前端开发
CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
127 0
|
Web App开发 编解码 前端开发
|
12月前
|
编解码 前端开发
css中单位px、pt、em和rem的区别
css中单位px、pt、em和rem的区别