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
307 0
|
6月前
|
前端开发
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
|
4月前
|
前端开发
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
603 0
|
移动开发 前端开发
|
前端开发 搜索推荐
理解 rem 方案原理
在适配不同屏幕尺寸的设备时采用等比缩放的方案
202 0
理解 rem 方案原理
|
前端开发 C++
CSS之轻松实现rem适配
CSS之轻松实现rem适配
384 0
CSS之轻松实现rem适配
|
前端开发 JavaScript Android开发
|
Web App开发 前端开发 JavaScript
动态REM
动态REM