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;

 

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

相关文章
|
移动开发 JavaScript 小程序
从入门到实践:Uni-app跨平台开发与应用
从入门到实践:Uni-app跨平台开发与应用
1265 1
|
资源调度 前端开发
postcss-px-to-viewport 屏幕适配方案
postcss-px-to-viewport 屏幕适配方案
|
9月前
|
移动开发 JavaScript 前端开发
在项目中引入和使用 SCSS 文件
在项目中引入和使用 SCSS 文件
859 156
|
JavaScript 前端开发 定位技术
|
9月前
|
人工智能 前端开发 JavaScript
高频刚需|日常必用|AI编程辅助表单与接口实操技巧详解
做开发这么久,用过不少AI编程助手,大多不是太复杂、门槛高,就是功能鸡肋不实用,直到偶然上手一款轻量化AI编程助手,才算找到贴合咱们普通开发者日常需求的帮手。今天不搞虚的,全程口语化唠唠,结合我两个多月的真实上手经历,换两个日常高频用到的实操案例,说说它怎么用、用着咋样,全程只聊技术和感受,不推荐、不引流,纯粹同行间唠唠经验。
344 1
|
12月前
|
JavaScript 小程序 Android开发
UniApp移动端开发 vs 原生开发:全面对比分析
本文全面对比UniApp与原生开发在语言、性能、成本、生态等方面的差异,深入解析两者技术原理与优化策略,结合启动速度、渲染性能、包大小等数据,提供适用场景推荐与混合开发方案,助力团队根据项目需求做出科学选型。
1554 0
|
JavaScript 前端开发 索引
如何快速实现一个无缝轮播效果
【8月更文挑战第24天】如何快速实现一个无缝轮播效果
366 2
如何快速实现一个无缝轮播效果
|
Web App开发 移动开发 安全
h5页面的优缺点(浅谈)
H5页面优点包括:跨平台性,易于传播,丰富的多媒体支持,开发成本低,更新便捷,良好的交互性。缺点则有:性能受限,功能受限,高度依赖网络,存在安全风险,用户体验一致性差。确保H5页面在不同设备上的兼容性,需遵循HTML5标准,使用响应式设计,并进行多设备测试。优化H5页面性能的方法包括减少HTTP请求,压缩文件大小,利用缓存机制,优化代码执行效率等。
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
497 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
JavaScript Android开发 开发者
从零开始:UniApp 项目搭建指南
从零开始:UniApp 项目搭建指南
768 4