CSS学习笔记:rem实现移动端适配的原理——媒体查询

移动端适配

移动端即手机端,也称M端

移动端适配:同一套移动端页面在不同屏幕尺寸的手机上可以实现宽度和高度的自适应,也就是页面中元素的宽度和高度可以根据屏幕尺寸的变化等比缩放

rem配合媒体查询可实现移动端适配

rem单位

媒体查询

媒体查询能够检测视口的宽度,然后编写差异化的CSS 样式

当某个条件成立, 执行对应的CSS样式

媒体特征

解释说明:max-width:200px; 代表视口宽度小于200px时样式生效

目前rem布局方案中,习惯将网页等分成10份,HTML标签的字号为视口宽度的1/10

代码示例:

将设计稿的px单位转化为rem单位

查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号(1/10视口宽度)

例如设计稿中某个元素的宽度时68px,设计稿的参考设备宽度是375px,那么元素宽度转化为rem为:N = 68 / 37.5

rem单位的尺寸 = px单位数值 / 基准根字号

移动适配框架——flexible.js

在实际代码书写中,我们不可能真的用媒体查询去实现移动端适配,以上只是让大家了解rem实现移动端适配的原理,因为面试时,知道原理,你和面试官才有话聊

在实际代码书写中,我们会使用flexible.js来实现移动端适配。flexible.js是手淘开发出的一个用来适配移动端的js框架。核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size

当然,这只是JS阶段的一个移动端适配的解决方案,到了Vue,还会有其他方案解决移动端适配

 

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

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

相关文章

SpringAdminClient如何将Httpbasic账号密码告知SpringAdminServer

场景,因为Config Service开了权限校验,注册到eureka之后,SpringAdmin查看信息会报错401,如果想在SpringAdmin中正确的看到Config Service的actuator信息则需要将账号密码告知给SpringAdmin,磁力用的是Eureka作为发现服…

1045. 买下所有产品的客户

1045. 买下所有产品的客户 题目链接:1045. 买下所有产品的客户 代码如下: # Write your MySQL query statement below select customer_id from Customer where product_key in (select product_key from Product) group by customer_id having count(…

WPF 如何调试

简述 它是一种系统机制,用于识别和修复一段代码中的错误或缺陷,这些错误或缺陷的行为与您的预期不同。调试子系统紧密耦合的复杂应用程序并不容易,因为修复一个子系统中的错误可能会在另一个子系统中创建错误。 在 C# 中调试 在 WPF 应用程序…

javaIO流知识点概况

一、前言: 1.1.流的概念: java将输入与输出比喻为"流",英文:Stream. 就像生活中的"电流","水流"一样,它是以同一个方向顺序移动的过程.只不过这里流动的是字节(2进制数据).所以在IO中有输入流和输出流之分,我们理解他们…

Vue3中使用 filter 方法通过 id 删除数组中的指定对象

Vue中使用 filter 方法通过 id 删除数组中的指定对象 一、前言1、示例2、案例 一、前言 在 Vue3 中,我们经常需要处理数据并进行相应操作,比如删除数组中的特定对象。在这篇文章中,我们将学习如何使用 filter 方法和响应式变量来实现这一目标…

单点11.2.0.3备份恢复到单点11.2.0.4

保命法则:先备份再操作,磁盘空间紧张无法备份就让满足,给自己留退路。 场景说明: 1.本文档的环境为同平台、不同版本(操作系统版本可以不同,数据库小版本不同),源机器和目标机器部…

swiftui基础组件Image加载图片,以及记载gif动图示例

想要在swiftui中展示图片,可以使用Image这个组件,这个组件可以加载本地图片和网络图片,也可以调整图片大小等设置。先大概看一下Image的方法有哪些可以用。 常用的Image属性 1.调整图像尺寸: 使用 resizable() 方法使图像可调整…

Java如何分块读取大文件

在Java中,分块读取大文件通常使用FileInputStream或BufferedInputStream结合循环来实现。以下是一个基本的示例,展示如何分块读取大文件: import java.io.BufferedInputStream; import java.io.FileInputStream; import java.io.IOException…

黑龙江等保测评:强化网络安全的北方防线

在数字化时代,网络空间已成为国家发展的新领域,其安全直接关系到国家安全、社会稳定和个人隐私。作为中国东北的重要省份,黑龙江省积极响应国家网络安全战略,深入实施信息安全等级保护制度(简称“等保”)&a…

量子密钥分发系统基础器件(一):光纤干涉仪

干涉仪的基本原理是利用波的叠加来获得波的相位信息,从而获取实验中所关心的物理量。光纤干涉仪是由光学干涉仪发展而来的,利用光纤实现光的干涉,由于光纤取代透镜系统构成的光路具有柔软、形状可随意变化、传输距离远等特点,当前…

【Linux】23. 线程封装

如何理解C11中的多线程(了解) #include <iostream> #include <unistd.h> #include <thread>void thread_run() {while (true){std::cout << "我是新线程..." << std::endl;sleep(1);} } int main() {// 任何语言需要在Linux上实现多线…

项目结构与模块划分策略

项目结构与模块划分策略可以根据项目的规模、功能需求和团队组成进行合理的设计。以下是一些常见的策略&#xff1a; 按功能划分&#xff1a;将项目按照不同的功能划分为不同的模块。每个模块负责处理特定的功能&#xff0c;如用户管理、订单处理、支付等。这种划分方式使得代码…

Vue组件通讯$refs获取组件实例例子

在Vue中&#xff0c;$refs 是一个对象&#xff0c;它持有注册过 ref 特性 (attribute) 的所有 DOM 元素和子组件实例。你可以使用 $refs 在父组件中直接访问子组件的实例或者 DOM 元素。 下面是一个使用 $refs 获取子组件实例的例子&#xff1a; 首先&#xff0c;我们有一个子…

解决IDEA菜单栏找不到VCS的问题,且使用IDEA推送新项目到托管仓库

问题描述&#xff1a; 在idea软件中使用git推送项目&#xff0c;idea页面顶部菜单栏无VCS 解决方案&#xff1a; 一&#xff1a;File->Settings->Version Control-> 点击 ->选择项目->VCS:->点击ok&#xff1a; 二&#xff1a;托管平台创建一个Git仓库来保…

Mysql 8.0 主从复制及读写分离搭建记录

前言 搭建参考&#xff1a;搭建Mysql主从复制 为什么要做主从复制&#xff1f; 做数据的热备&#xff0c;作为后备数据库&#xff0c;主数据库服务器故障后&#xff0c;可切换到从数据库继续工作&#xff0c;避免数据丢失。架构的扩展。业务量越来越大&#xff0c;I/O访问频…

MySQL忘记密码怎么办?教你无密码登录

MySQL免密钥登录 文章目录 MySQL免密钥登录一、修改配置文件二、无密码登录三、修改root密码四、使用新密码登录 一、修改配置文件 # 这个配置项的意思是告诉mysql跳过权限验证&#xff0c;允许任何用户以任何密码登录 [rootmysql ~]# echo "skip-grant-tables" >…

6月来得及!考研数学120分复习规划:660/880/1000/1800怎么刷?

首先&#xff0c;120分是个什么概念&#xff1f; 如果目标120&#xff0c;历年真题就要135以上。这是因为&#xff1a; 1. 习题册里都是历年真题改编&#xff0c;很多题型见过了&#xff1b; 2. 考场发挥有不确定因素&#xff0c;所以需要安全边界。 总体规划 那么&#xff…

java.lang.StackOverflowError解决方案

java.lang.StackOverflowError解决方案 java.lang.StackOverflowError 是一种运行时错误&#xff0c;通常发生在递归方法调用过深&#xff0c;导致线程的调用栈溢出时。这种错误表明程序中的递归调用没有适当地结束&#xff0c;或者递归深度超过了JVM的栈大小限制。 以下是一…

FFmpeg 中 protocols 使用文档介绍

描述 FFmpeg 中用ibavformat 库来提供的输入和输出协议。 protocols选项 关于 libavformat 库中协议选项的详细信息总结: 全局选项:libavformat 库提供了一些适用于所有协议的通用全局选项。 私有选项:每个协议也可能支持特定的私有选项,这些选项仅适用于相应的组件。 设…

2105. 给植物浇水 II

2105. 给植物浇水 II 题目链接&#xff1a;2105. 给植物浇水 II 代码如下&#xff1a; //双指针法 class Solution { public:int minimumRefill(vector<int>& plants, int capacityA, int capacityB) {int res0;int i0,jplants.size()-1;int acapacityA,bcapacity…