rem适配方法

news2024/11/18 21:37:40

rem适配案例:

高度适配,现在是写死的

 在不同的屏幕下进行适配 

根据不同设备适配不同页面的实施方案有两种

如果是在320像素字体下,字体是多大

 如果在750像素下屏幕是多大

 比例就是2rem

 先拿一个标准的稿件算rem

我们等比例缩放rem的值是怎么算出来的

 我这里有一个100像素的盒子,100就是页面的元素值,50怎么算出来的,是通过我屏幕的分数划为出来的,我屏幕是750,划分为15份,每份就是50,在我们页面下有这样一张图片,在750像素下是多大

 页面有这样的图片如何实现自适应那:

 如何提出技术选型构思,提出的技术选型应该包括什么:

 搭建页面结构

先把我Css样式改成这个样子,然后把初始文件也引入

 讲它设置为公共样式文件

这项技术要注意用户手机屏的适配,网站最好设置有用户反馈

最终结果算好了 

html 里的这句话一定要写到最上面,这句话一定要写:

公共样式文件写完之后,写首页样式文件

 在首页样式文件中导入公共样式文件,新建index.less文件:

 导入样式文件,导入文件用@import "common";

link是把文件引入到Css样式文件中

 样式的写,必须要有min -width,同时居中显示是

这里直接写死,因为我们的设计稿是750像素,而我们1rem是50px,所以这里写成15rem,写成15rem就可以

给我写字体和背景颜色

 顶部搜索框如何塑造

 写盒子的时候,不就有宽,有高,有大小,宽度是15rem,高度怎么算,可以换算出来了

 

 看样子开发的用户产品,需要都得是rem

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

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

相关文章

【项目 进程 9】2.19 信号概述 2.20 kill、raise、abort函数

文章目录 2.19 信号概述信号的概念Linux信号一览表信号的5种默认处理动作corecore文件权限及位置设置 2.20 kill、raise、abort函数(给进程发信号) 2.19 信号概述 信号的概念 Linux信号一览表 共62种信号。 SIGKILL:所有进程不包括僵尸进程…

Flexbox

Flexbox 一、什么是 Flexbox ?二、Flexbox 知识点2.1、Flex Container(容器)2.1.1、轴2.1.2、添加flex支持2.1.3、flex-direction(主轴向)2.1.3.1、row 横向2.1.3.2、row-reverse 横向翻转2.1.3.3、column 纵向2.1.3.4、column-r…

关于LCD、LED、OLED、MLED(包含mimiLED和microLED)、柔性屏、超薄屏

关于LCD、LED、OLED、MLED、柔性屏、超薄屏 1、LCD:液晶显示屏,LED为其提供背景光源。 2、LED:发光二极管,是LCD的一部分。就是个灯泡。 3、OLED:相对于LCD来讲的,LCD要靠别人给他提供光、本身不能自发光…

JavaScript(四)DOM及CSS操作

1、DOM简介 DocumentType: Html的声明标签 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Docume…

基础实验篇 | PX4控制器的外部通信

PX4控制器的外部通信 01 实验名称及目的 PX4控制器的外部通信&#xff1a;在进行硬件在环仿真时&#xff0c;我们常常需要向设计的Simulink控制器中发送数据&#xff08;传感器数据、故障触发、控制指令、参数调整等&#xff09;&#xff0c;同时接收一些感兴趣的数据。RflySi…

隐藏程序文档窗口工具1.0下载

在录屏或直播时有些窗口&#xff0c;比如讲稿提词器等&#xff0c;不想录进视频里&#xff0c;或者不想被观众看到&#xff0c;您可以使用这个窗口隐藏工具。 这个隐藏并不是真的隐藏了&#xff0c;我们在电脑上依然可以看到&#xff0c;但是直播或录屏工具抓取不到了&#xf…

看pdf的软件有哪些?这几款了解一下

看pdf的软件有哪些&#xff1f;PDF格式的文件在现代社会中应用广泛&#xff0c;而PDF阅读器是很重要的一种工具。相比于其他文件格式&#xff0c;PDF文件的格式统一&#xff0c;便于分享和传输&#xff0c;并且不易被篡改。而PDF阅读器则是我们查看、编辑和管理PDF文件的必备工…

<C++>入门

在学习完C语言的基础上&#xff0c;继续开始C的学习。 C是在C的基础之上&#xff0c;容纳进去了面向对象编程思想&#xff0c;并增加了许多有用的库&#xff0c;以及编程范式 等。熟悉C语言之后&#xff0c;对C学习有一定的帮助&#xff0c;本章节主要目标&#xff1a; 1. 补充…

11年编码经验程序员惨遭淘汰解雇,原因竟是不会使用AI工具

近日&#xff0c;Twitter 上一名技术人分享了一个事件&#xff0c;即拥有11年Java编码经验、会 100% 手写代码的程序员因拒绝使用辅助代码工具&#xff0c;只想写可控的代码&#xff0c;竟败给一位仅有4年经验、却善用编码工具的后辈&#xff0c;惨遭面试淘汰。 当「拒绝使用编…

ASIC芯片设计全流程项目实战课重磅上线 ,支持 65nm制程流片 !

全流程项目实战课学什么&#xff1f; 此次推出【 ASIC芯片设计全流程项目实战课】&#xff0c;基于IPA图像处理加速器&#xff0c;以企业级真实ASIC项目为案例&#xff0c;学员可参与全流程项目实践&#xff0c;以及65nm真实流片&#xff01; 众所周知&#xff0c;放眼整个IC硕…

Java泛型6——类型擦除

注&#xff1a;以下内容基于Java 8&#xff0c;所有代码都已在Java 8环境下测试通过 Java泛型1——概述Java泛型2——泛型类Java泛型3——泛型接口Java泛型4——泛型方法Java泛型5——泛型通配符Java泛型6——类型擦除 1. 什么是类型擦除 泛型是在Java 1.5被引进的&#xff0…

sqlserver 使用SQLOLEDB 远程数据库同步数据

exec sp_addlinkedserver remote_server, , SQLOLEDB, ip exec sp_addlinkedsrvlogin remote_server, false,null, 账号, 密码 --查询方式 select * from remote_server.数据库名.dbo.表名 --不再使用时删除链接服务器 exec sp_dropserver remote_server, droplogins…

时序数据库 TDengine 与 WhaleStudio 完成相互兼容性测试认证

近年来&#xff0c;开源及其价值获得社会各界的广泛认可&#xff0c;无论是国家政策导向还是企业数字化转型&#xff0c;都在加速拥抱开源。对于如操作系统、数据库等基础软件来说&#xff0c;开源更是成为驱动技术创新的有力途径。 在此背景下&#xff0c;近日&#xff0c;涛…

前沿分享-会发电的水凝胶敷料

四川大学的研究团队设计了一种新型的伤口敷料&#xff0c; 将电刺激治疗引入伤口敷料&#xff0c;达到营造湿润环境的同时利用电刺激来加速愈合的效果。 上半部分由树状纳米纤维构成&#xff0c;下半部分由双网络导电水凝胶构成&#xff0c;加入了铁离子和儿茶酚。该部分用于贴…

Unity数字可视化学校_昼夜(一)

maya2022:链接&#xff1a;https://pan.baidu.com/s/1cvB438UKsv_tU37NsOaNow 3dmax软件合集:百度网盘 请输入提取码 1180 1、 2、unity3d 导入插件 &#xff1a; &#xff08;1&#xff09;UniStorm - Volumetric Clouds Sky 5.3.0.unitypackage &#xff08;天气&…

coopeliasim的光lights

光源是允许您照亮场景的对象。场景中没有任何光线的情况下&#xff0c;对象将以无阴影的颜色显示&#xff08;在这种情况下&#xff0c;对象仅使用可在环境对话框中设置的环境光组件照明&#xff09;。下图说明了场景中灯光的效果&#xff1a; [场景照明 &#xff08;1&#xf…

安达发|APS适用于什么场景

APS适用于什么场景 使用Excel进行生产计划和排程&#xff0c;然而在我国很多的小微企业中&#xff0c;很多都是用EXCEL甚至手工进行生产计划和排程&#xff0c;不能实现系统优化生产计划和排程(APS)的智能制造是伪概念的智能制造。 智能制造过程中&#xff0c;必然涉及系统优…

数据结构【第2章】——算法

算法 算法是解决特定问题求解步骤的描述&#xff0c;在计算机中表现为指令的有限序列&#xff0c;并且每条指令表示一个或多个操作。 注&#xff1a;算法定义中&#xff0c;提到了指令&#xff0c;指令能被人或计算装置执行。它可以是计算机指令&#xff0c;也可以是我们平时…

基于基于Web停车场管理系统的设计与实现-【开题报告】

文章目录 本系列校训毕设的技术铺垫文章主体层次选题目的和意义&#xff1a;课题研究目标、内容和手段&#xff1a;系统功能设计&#xff08;论文&#xff09;提纲&#xff1a;日程安排&#xff1a;参考文献 配套资源 本系列校训 互相伤害互相卷&#xff0c;玩命学习要你管&am…

机房环境、动力、网络、安防,帮您提高运维效率,确保机房安全

机房作为单位的核心部门&#xff0c;由计算机、服务器、网络设备、存储设备等关键设备组成&#xff0c;智能化计算机机房这个概念在各个领域中&#xff0c;已经占据了很重要的地位&#xff0c;伴随着国家大力倡导的&#xff0c;东数西算&#xff0c;数字经济、云计算、5G大数据…