使用rem单位制,实现页面适应性窗口元素

目录

REM单位:

媒体查询:

引入资源:

REM适配方案:

适配方案一: rem+媒体查询+less技术

适配方案二:


REM单位:

rem(rootem)是一个相对单位,类似于em,em是父元素字体大小。


不同的是rem的基准是相对于html元素的字体大小。
比如,根元素(html)设置font-size-12px:非根元素设置width2rem;则换成px表示就是24px.

REM是针对于html的文字大小。

借此主要是为了结合媒体查询能够实现,当窗口大小发生改变的时候,字体,元素的大小也会发生改变。

媒体查询:

媒体查询(mediaquery)是css3新语法。
使用 @media查询,可以针对不同的媒体类型定义不同的样
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机,android手机,平板等设备都用得到多媒体查询

这样就可以实现随着视窗口的改变实现字体大小等的一键改变了。

在视窗口的大小在500到800之间的时候背景展示为粉色。

在视窗口的大小小于500的时候背景展示为紫色。

这两个表示两个他们之间不会冲突。

---

此外,下图便是,表示在一个范围内的变化。


引入资源:

当样式比较繁多的时候,我们可以针对不同的媒体使用不同stylesheets(样式表).
原理,就是直接在link中判断设备的尺寸,然后引用不同的css文件。


REM适配方案:

适配方案一: rem+媒体查询+less技术

less使用时的特殊用法:

适配方案二:

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

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

相关文章

elasticsearch下载及可视化工具下载使用

elasticsearch下载及配置、启动 一、下载 Download Elasticsearch | Elastic 二、启动 双击bat即可。 出现如下说明启动成功: 访问测试: 三、注意 (1)因为es启动默认端口是:9200,所以需要检查此端口是否被占用。…

Linux系统中HTTP代理的常见问题及解决方案

亲爱的Linux用户们,是不是有时候觉得HTTP代理就像是一个魔法盒子,让你在数字世界中自由穿梭?但是,就像所有的魔法物品一样,它也会偶尔出点小状况。今天,我们就来一起探讨一下Linux系统中HTTP代理的常见问题…

DC-9靶机渗透详细流程

信息收集: 1.存活扫描: arp-scan -I eth0 -l 发现靶机ip:192.168.10.132 └─# arp-scan -I eth0 -l 192.168.10.1 00:50:56:c0:00:08 (Unknown) 192.168.10.2 00:50:56:e5:b1:08 (Unknown) 192.168.10.132 //靶机 00:0c…

【漏洞复现】狮子鱼CMS某SQL注入漏洞

Nx01 产品简介 狮子鱼CMS(Content Management System)是一种网站管理系统,它旨在帮助用户更轻松地创建和管理网站。该系统拥有用户友好的界面和丰富的功能,包括页面管理、博客、新闻、产品展示等。通过简单直观的管理界面&#xf…

如何快速搭建springboot项目(新手入门)

一、创建项目 1.1、创建项目 1.2、配置编码 1.3、取消无用提示 1.4、取消无用参数提示 二、添加POM父依赖 <!-- 两种方式添加父依赖或者import方式 --> <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-p…

Android 粒子喷泉动效

一、前言&#xff1a; 在学习open gl es实现动效的时候&#xff0c;打算回顾了一下用普通的2D坐标系实现粒子效果和 open gl 3d 坐标系的区别&#xff0c;以及难易程度&#xff0c;因此本篇以Canvas 2D坐标系实现了一个简单的demo。 粒子动效原理&#xff1a; 粒子动效本质上…

创新指南|企业实施Gen AI面临的10大挑战

文章列出了实现生成式人工智能&#xff08;Gen AI&#xff09;成功的十大挑战。这些挑战涵盖了从数据管理和法律法规到处理能力、解释能力、准确性问题等多个方面。文章强调&#xff0c;尽管Gen AI具有巨大的潜力&#xff0c;但要克服这些挑战以实现其在业务中的有效应用。这些…

macOS Sonoma 14.3.1(23D60)发布

系统介绍 黑果魏叔2 月 9 日消息&#xff0c;苹果今日向 Mac 电脑用户推送了 macOS 14.3.1 更新&#xff08;内部版本号&#xff1a;23D60&#xff09;&#xff0c;本次更新距离上次发布隔了 17 天。 魏叔 查询苹果官方更新日志&#xff0c;macOS Sonoma 14.3.1 修复内容和 …

Web Services 服务 是不是过时了?创建 Web Services 服务实例

Web Services 是不是过时了&#xff1f; 今天是兔年最后一天&#xff0c;先给大家拜个早年 。 昨天上午视频面试一家公司需要开发Web Services 服务&#xff0c;这个也没有什么&#xff0c;但还需要用 VB.net 开发。这个是多古老的语言了&#xff0c;让我想起来了 10年 前 写 …

剑指offer——替换空格

目录 1. 题目描述与背景1.1 题目描述1.2 背景 2. 一般思路 &#xff08;时间复杂度为O(n)&#xff09;3. 分析4. 完整代码4.1 标准答案 1. 题目描述与背景 1.1 题目描述 请实现一个函数&#xff0c;把字符串中的每个空格替换成 “ %20 ” 。例如&#xff1a;输入“ we are hap…

1 scala集合-数组

1 定长数组 定长数组&#xff0c;是指数组长度不可变。定义定长数组的方法有如下两种&#xff1a; 方法1&#xff1a; var/val variable_name new Array[元素类型](数组长度) // 通过制定长度定义例如&#xff0c;定义一个长度为20的Int 类型数组。 scala> val a new …

Flask实现文件下载服务的优雅实现

Flask 是一个轻量级的 Web 框架,通过其简洁的API和灵活性,可以轻松地实现各种Web应用。在本文中,我们将探讨如何在 Flask 中实现一个文件下载服务,通过一个简单的例子来演示如何在浏览器中触发文件下载。 1. 准备工作 首先,我们需要创建一个 Flask 应用,并引入所需的模…

云原生之基石-容器Docker

1. 云原生应用程序部署需求 云原生应用程序采用微服务架构来开发&#xff0c;势必产生大量的子系统&#xff0c;发布大量的程序包&#xff0c;部署起来工作量不小。 程序运行是有依赖的&#xff0c;C/C程序依赖各种动态库&#xff0c;Java程序依赖JDK和各种Jar库&#xff0c;Py…

[office] excel求乘积的公式和方法 #媒体#笔记#经验分享

excel求乘积的公式和方法 本文首先给出两个常规的excel求乘积的链接&#xff0c;然后再例举了一个文字和数字在同一单元格里面的excel求乘积的公式写法。 excel求乘积的方法分为两种&#xff0c;第一种是直接用四则运算的*来求乘积&#xff0c;另外一种就是使用PRODUCT乘积函数…

AJAX——认识URL

1 什么是URL&#xff1f; 统一资源定位符&#xff08;英语&#xff1a;Uniform Resource Locator&#xff0c;缩写&#xff1a;URL&#xff0c;或称统一资源定位器、定位地址、URL地址&#xff09;俗称网页地址&#xff0c;简称网址&#xff0c;是因特网上标准的资源的地址&…

2024年【氧化工艺】新版试题及氧化工艺操作证考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 氧化工艺新版试题是安全生产模拟考试一点通生成的&#xff0c;氧化工艺证模拟考试题库是根据氧化工艺最新版教材汇编出氧化工艺仿真模拟考试。2024年【氧化工艺】新版试题及氧化工艺操作证考试 1、【单选题】 对现场窨…

Python入门:常用模块—os模块及sys模块

os模块 sys模块 import sys print(sys.argv) # 命令参数list&#xff0c;第一个元素是程序本身路径 print(sys.exit()) # 退出程序&#xff0c;正常退出是exit(0) print(sys.version) # 获取python解释程序的版本信息 print(sys.maxint()) # 最大…

02.01_111期_C++_构造函数初始化列表笔记

运算符重载对 1. 操作数的个数 2. 操作数出现的顺序都有确定要求 所以如果 对 << 这个操作符进行重载&#xff0c; <<这个操作符有两个操作数&#xff0c;而且左右操作数有顺序要求 那么d1将成为this指针指向的对象&#xff0c;也将会 <&l…

SpringCloud-微服务概述、SpringCloud入门概述、服务提供与消费

1.学习前言 1.1 学习前提 熟练使用SpringBoot 微服务快速开发框架了解过Dubbo Zookeeper 分布式基础电脑配置内存不低于8G 1.2 文章大纲 Spring Cloud 五大组件 服务注册与发现——Netflix Eureka负载均衡&#xff1a; ​ 客户端负载均衡——Netflix Ribbon ​ 服务端负载…

KVM和JVM的虚拟化技术有何区别?

随着虚拟化技术的不断发展&#xff0c;KVM和JVM已成为两种主流的虚拟化技术。尽管它们都提供了虚拟化的解决方案&#xff0c;但它们在实现方式、功能和性能方面存在一些重要的差异。本文将深入探讨KVM和JVM的虚拟化技术之间的区别。 KVM&#xff08;Kernel-based Virtual Mac…