CSS面试题:说一说对rem的理解?

概述:

页面响应式用 rem 实现【根据设备屏幕宽度改变根元素fontsize】,设备自适应用 媒体查询 实现【根据设备屏幕宽度控制哪些样式class生效】

媒体查询实现:【页面结构需要变化时使用】

1、link元素中的CSS媒体查询【一般用于Js项目】

<!-- pc端,设备屏幕宽度大于等于901px时,pc端样式文件class生效,控制某些元素显示隐藏、字体rem值改变等 -->

<link rel="stylesheet" media="(min-width:901px)" href="./css/pc/index.css">

<!-- 移动端,设备屏幕宽度小于等于900px时,移动端样式文件class生效,控制某些元素显示隐藏、字体rem值改变等 -->

<link rel="stylesheet" media="(max-width:900px)" href="./css/pe/index.css">

2、样式表中的CSS媒体查询【一般用于Vue项目】

<!-- pc端 -->

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

body {

background-color: red;

}

}

<!-- 移动端 -->

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

body {

background-color: green;

}

}

rem原理:

百分比布局可实现响应式布局,而rem相当于百分比布局。无论设备可视窗口如何变化,始终设置rem为width的1/n,即实现了百分比布局。

rem公式:

方案一:1rem=100px【方便计算】

html.fontSize = 1rem = 设备屏幕宽度/(设计稿宽度/100),

1、分析阶段 --- 让设备屏幕宽度等于设计稿宽度,则1rem=100px,此时方便计算、编写设计稿元素宽度对应的rem。

2、执行阶段 --- 让设备屏幕宽度等于Js获取的设备屏幕宽度

方案二:1rem = 设计稿宽度/份数【需使用cssrem插件来方便计算】

1、分析阶段 --- html.fontSize = 1rem = 设计稿宽度/份数

2、执行阶段 --- html.fontSize = 1rem = 设备屏幕宽度/份数

3、页面元素的rem:nrem = 设计稿元素宽度/1rem

rem实现:

1、分析阶段,先根据设计稿宽度px计算1rem,再根据设计稿元素宽度px计算、编写页面元素的rem

2、执行阶段,Js先自动根据设备屏幕宽度计算1rem,再将1rem对应的px赋值给Html的fontsize,再根据编写好的页面元素的rem,计算实际页面元素的px

rem工具:

分析阶段:cssrem插件,把页面元素px自动计算成rem。需先在VSCode的配置文件中,根据设计稿宽度px计算1rem。

执行阶段:flexible.js库,将设备屏幕宽度分成了10份,根据设备屏幕宽度自动计算1rem。【Js项目在head中引入,Vue项目在main.js中引入】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/708818.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sshd: Privilege separation user sshd does not exist

报错 /usr/local/sbin/sshd -t -f /usr/local/etc/sshd_config Privilege separation user sshd does not exist解决办法1 编译/etc/passwd&#xff0c;增加这样一行 sshd:x:74:74:Privilege-separated SSH:/var/empty/sshd:/sbin/nologin 解决办法2 # groupadd sshd addg…

【深度学习:视频注释】如何为机器学习自动执行视频注释

【深度学习&#xff1a;视频注释】如何为机器学习自动执行视频注释 #1&#xff1a;多目标跟踪 &#xff08;MOT&#xff09; 以确保帧与帧之间的连续性#2&#xff1a;使用插值来填补空白#3: 使用微模型加速人工智能辅助视频注释#4: 自动目标分割提高目标分割质量 自动视频标记通…

Linux/Spectra

Enumeration nmap 第一次扫描发现系统对外开放了22&#xff0c;80和3306端口&#xff0c;端口详细信息如下 22端口运行着ssh&#xff0c;80端口还是http&#xff0c;不过不同的是打开了mysql的3306端口 TCP/80 进入首页&#xff0c;点击链接时&#xff0c;提示域名不能解析&…

分享一点PDF中获取表格的探索过程

版面分析&#xff1a;如何得到标题、如何的得到段落&#xff08;正确的段落&#xff09;、如何得到表格、如何得到图片&#xff0c;图和得到图片上的文字&#xff1f; 还有细节问题&#xff1a;双栏和多栏的问题、公式问题 扫描件&#xff1a;扫描件本质上是图片&#xff0c;如…

【三维重建】【slam】【分块重建】LocalRF:逐步优化的局部辐射场的鲁棒视图合成

项目地址&#xff1a;https://localrf.github.io/ 题目&#xff1a;Progressively Optimized Local Radiance Fields for Robust View Synthesis 来源&#xff1a;KAIST、National Taiwan University、Meta 、University of Maryland, College Park 提示&#xff1a;文章用了s…

Socks5代理IP在跨境电商、网络爬虫领域的实战运用

Socks5代理IP在跨境电商和网络爬虫领域有着广泛的应用&#xff0c;主要体现在以下几个方面&#xff1a; 1. 跨境电商&#xff1a; - 访问速度优化&#xff1a;跨境电商平台往往需要频繁地访问全球各地的网站和服务&#xff0c;如商品信息抓取、价格监控等。通过使用Socks5代理I…

【GB28181】wvp-GB28181-pro修改分屏监控为16画面(前端)

引言 作为一个非前端开发人员,自己摸索起来比较费劲,也浪费了很多时间 由于实际开发中,可能预览的画面多于8个,而wvp目前只支持8画面 本文快速帮助开发者修改分屏监控为多画面。例如16画面,20画面等 文章目录 一、 预期效果展示16分割画面20分割画面二、 源码修改-前端修改…

小白水平理解面试经典题目leetcode 606. Construct String from Binary Tree【递归算法】

Leetcode 606. 从二叉树构造字符串 题目描述 例子 小白做题 坐在自习室正在准备刷题的小白看到这道题&#xff0c;想想自己那可是没少和白月光做题呢&#xff0c;也不知道小美刷题刷到哪里了&#xff0c;这题怎么还没来问我&#xff0c;难道是王谦谦去做题了&#xff1f; 这…

用友 NC 23处接口XML实体注入漏洞复现

0x01 产品简介 用友 NC 是用友网络科技股份有限公司开发的一款大型企业数字化平台。 0x02 漏洞概述 用友 NC 多处接口存在XML实体注入漏洞,未经身份验证攻击者可通过该漏洞读取系统重要文件(如数据库配置文件、系统配置文件)、数据库配置文件等等,导致网站处于极度不安全…

使用PARP抑制剂Olaparib对骨肉瘤细胞进行放射增敏【AbMole】

骨肉瘤细胞来源于对辐射不敏感的骨形成间充质细胞。因此&#xff0c;科学家们希望找到新的方法能够使其对放射增敏。研究人员进行了使用PARP抑制剂Olaparib来增强骨肉瘤细胞的放射敏感性的研究。 研究方法主要包含以下几项实验&#xff1a;通过CCK-8和克隆形成实验评估Olapari…

使用 OpenCV 通过 SIFT 算法进行对象跟踪

本文介绍如何使用 SIFT 算法跟踪对象 在当今世界&#xff0c;当涉及到对象检测和跟踪时&#xff0c;深度学习模型是最常用的&#xff0c;但有时传统的计算机视觉技术也可能有效。在本文中&#xff0c;我将尝试使用 SIFT 算法创建一个对象跟踪器。 为什么人们会选择使用传统的计…

【Go语言】Go语言中的字典

Go语言中的字典 字典就是存储键值对映射关系的集合&#xff0c;在Go语言中&#xff0c;需要在声明时指定键和值的类型&#xff0c;此外Go语言中的字典是个无序集合&#xff0c;底层不会按照元素添加顺序维护元素的存储顺序。 如下所示&#xff0c;Go语言中字典的简单示例&…

java spring cloud 企业工程管理系统源码+二次开发+定制化服务

鸿鹄工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内部工程管…

从Mysql 数据库删除重复记录只保留其中一条(删除id最小的一条)

准备工作&#xff1a;新建表tb_coupon /*Navicat Premium Data TransferSource Server : rootlocalhostSource Server Type : MySQLSource Server Version : 50527Source Host : localhost:3306Source Schema : leyouTarget Server Type : My…

java开发环境配置一指禅

IDEA下载与安装 IDEA 全称 IntelliJ IDEA&#xff0c;是java编程语言的集成开发环境。 idea下载地址 。 JDK安装配置 JDK是 Java 语言的软件开发工具包&#xff0c;主要用于移动设备、嵌入式设备上的java应用程序。JDK是整个java开发的核心&#xff0c;它包含了JAVA的运行环…

以ARM Cortex-A55/A53为例分析 L1/L2/L3 cache所支持的写策略(write-back/wirte-through,写通和写回)

在文章 ARM 中缓存维护策略&#xff1a;Allocate policy&#xff08;读分配/写分配&#xff09;&#xff0c;Write policy&#xff08;写通/写回&#xff09;以及replacement policy基础知识中&#xff0c;笔者介绍了ARM cache的Write policy&#xff08;写通/写回&#xff09;…

理解C转汇编后代码分析

题目 . - 力扣&#xff08;LeetCode&#xff09; 解题代码 #include <stdio.h> #include "stdbool.h"typedef struct {int score;int index;int count; } Record; Record records[26] {0};int totalScore(char *w) {int total 0;for (int i 0; i < st…

Python的解释器

无极低码 &#xff1a;https://wheart.cn 2. 使用 Python 的解释器 2.1. 唤出解释器 当 Python 解释器在机器上可用时&#xff0c;它通常被安装在 /usr/local/bin/python3.12&#xff1b;只要将 /usr/local/bin 加入 Unix shell 的搜索路径就可以通过输入如下命令来启动它&am…

热点参数流控(Sentinel)

热点参数流控 热点流控 资源必须使用注解 SentinelResource 编写接口 以及 热点参数流控处理器 /*** 热点流控 必须使用注解 SentinelResource* param id* return*/ RequestMapping("/getById/{id}") SentinelResource(value "getById", blockHandler …

Java设计模式 | 七大原则之合成复用原则

基本介绍 合成复用原则&#xff08;Composite Reuse Principle&#xff09;尽量使用合成/聚合的方式&#xff0c;而不是使用继承 设计原则核心思想总结 找出应用中可能需要变化之处&#xff0c;把他们独立出来&#xff0c;不要和那些不需要变化的代码混在一起针对接口编程&…