rem适配方法

简介: rem适配方法

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

相关文章
umi 中如何使用 px2rem 插件做rem适配
在umi的src下面创建两个文件app.ts和document.ejs
490 0
|
编解码 前端开发 JavaScript
前端:Rem 及其转换原理
Rem是一种用于前端开发的相对字体大小单位,它基于根元素的字体尺寸来定义文本大小,有助于实现响应式布局和可维护性。Rem的转换原理是通过相对于HTML根元素的字体大小来设置子元素的字体大小,从而实现统一的比例调整,提高页面的适应性和灵活性。此方法简化了跨浏览器和设备的布局调整,增强了用户体验。
|
前端开发 JavaScript
CSS 【详解】响应式布局(含 rem 详解)
CSS 【详解】响应式布局(含 rem 详解)
233 0
|
移动开发 前端开发 UED
深入理解Rem适配:移动端网页设计的利器
深入理解Rem适配:移动端网页设计的利器
|
小程序
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
1385 0
|
Web App开发 存储 JavaScript
前端如何学习Node.js及Node.js的主要用途
【7月更文挑战第16天】 学习Node.js对前端开发者至关重要,涉及理解其基于V8的运行时环境、JavaScript基础、安装与验证、核心模块(如fs、http、path)及npm管理。实践项目,如用Express建服务器,参与开源,深入学习异步编程和事件循环。Node.js用于服务器开发、构建工具、本地开发服务器和实时应用,提升全栈能力。借助官方文档和各种资源加速学习。
342 4
|
前端开发 JavaScript
前端 TS 快速入门之三:class 类
前端 TS 快速入门之三:class 类
312 1
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
存储 前端开发 JavaScript
【Web 前端】JS中的栈和堆是什么?优缺点?
【4月更文挑战第22天】【Web 前端】JS中的栈和堆是什么?优缺点?
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的小说阅读器的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的小说阅读器的详细设计和实现
308 2