当前位置: 首页 > news >正文

自适应布局之淘宝无限适配+rem+微信rpx自适应

一、自适应布局

所谓前端适配,就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果,目前比较流行的方法有两种。一种是强制meta viewport宽度为设计稿宽度,一种是使用rem自适应布局的flexible.js。

二、当前流行的移动端自适应方案:rem + 淘宝无限适配

2.1、rem布局

rem是css中的单位,而且是相对单位,rem单位是基于html中根元素的字体大小。(因此我们只需要动态改变根元素的字体大小从而达到自适应的目的)

2.2、淘宝无线适配

根据屏幕宽度划分成十等分,其中一份的宽度就是根元素字体的大小

//meta视口标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

2.3、flexible.js源码

  var docEl = document.documentElementvar dpr = window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize () {if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px'}else {document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit () {var rem = docEl.clientWidth / 10docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resizewindow.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}
}(window, document))

2.4、VSCode自动将px转化为rem

1.下载插件cssrem
2.vscode中打开文件 ==>首选项 ==>设置 ==>扩展 ==>cssrem.configuration ==>Root-font-size

三、小程序自适应之rpx自适应

rpx是微信小程序独有的css单位
以1rpx为基础单位
rpx (responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx 。

如在iPhone6 上,屏幕宽度为 375px ,共有750个物理像素,则 750rpx = 375px = 750物理像素 , 1rpx = 0.5px = 1物理像素 。
在这里插入图片描述

使用步骤:

  1. 确定设计稿宽度 pageWidth
  2. 计算比例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth 。
  3. 在less文件中,只要把设计稿中的px=>750/pageWidth rpx 即可(将px单位替换即可,其余数字再乘即可)。

💕原创不易,还希望各位大佬支持一下\textcolor{blue}{原创不易,还希望各位大佬支持一下}原创不易,还希望各位大佬支持一下

👍 点赞,你的认可是我创作的动力!\textcolor{orange}{点赞,你的认可是我创作的动力!}点赞,你的认可是我创作的动力!

收藏,你的青睐是我努力的方向!\textcolor{red}{收藏,你的青睐是我努力的方向!}收藏,你的青睐是我努力的方向!

🥕 评论,你的意见是我进步的财富!\textcolor{green}{评论,你的意见是我进步的财富!}评论,你的意见是我进步的财富!

相关文章:

自适应布局之淘宝无限适配+rem+微信rpx自适应

一、自适应布局 所谓前端适配&#xff0c;就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果&#xff0c;目前比较流行的方法有两种。一种是强制meta viewport宽度为设计稿宽度&#xff0c;一种是使用rem自适应布局的flexible.js。 二、当前流行的移动端自适应…...

esxi不能识别不兼容网卡解决方案

相信很多网友在安装测试VMWARE Esxi 6.0的时候&#xff0c;总会遇到无法兼容网卡的情况&#xff0c;本人也是遇到了再组装的台式机上测试ESXI 6.0的时候&#xff0c;无法识别REALTEK RTL 8111E的情况。 找了很多网友提供的博客&#xff0c;方法是正确的&#xff0c;但是不够严…...

Sizeof与Strlen的区别与联系

16年写了很多 C 与 C 相关的文章&#xff0c;但是后面从事了 Android 开发&#xff0c;就全部删掉了&#xff0c;无意中发现了这篇由还存在草稿箱&#xff0c;索性就找回来吧&#xff0c;也是追忆当年学习的青葱岁月 Sizeof与Strlen的区别与联系 一、sizeof sizeof(…)是运算…...

力扣(LeetCode)413. 等差数列划分(2023.02.15)

如果一个数列 至少有三个元素 &#xff0c;并且任意两个相邻元素之差相同&#xff0c;则称该数列为等差数列。 例如&#xff0c;[1,3,5,7,9]、[7,7,7,7] 和 [3,-1,-5,-9] 都是等差数列。 给你一个整数数组 nums &#xff0c;返回数组 nums 中所有为等差数组的 子数组 个数。 …...

蓝桥杯刷题——基础篇(一)

这部分题目&#xff0c;主要面向有志参加ACM与蓝桥杯竞赛的同学而准备的&#xff0c;蓝桥杯与ACM考察内容甚至评测标准基本都一样&#xff0c;因此本训练计划提供完整的刷题顺序&#xff0c;循序渐进&#xff0c;提高代码量&#xff0c;巩固基础。因竞赛支持C语言、C、Java甚至…...

Java基础知识快速盘点(三)

一&#xff0c;构造器 创建一个类的方法时会调用该类的构造器 构造器&#xff0c;也叫构造方法 构造器是属于类的&#xff0c;对象不可调用 构造方法没有返回值类型 构造方法一般用public修饰&#xff0c;也可用private修饰&#xff0c;例如 public class Test {private T…...

vscode编程小插件之Doxygen和Better Align

一、插件Doxygen:配置相应文件、函数说明项。 1、扩展商店&#xff0c;搜索Doxygen&#xff0c;如下图1&#xff0c;安装。 图1 2、设置项中&#xff0c;选择扩展设置&#xff0c;如图2 图2 3、配置版本、作者邮箱、作者名称、日期格式等等&#xff0c;如图3 4、定义函数后&…...

指 针

1.指针指针的作用: 可以通过指针间接访问内存&#xff08;可以通过指针的保存一个地址&#xff08;指针--地址&#xff09;&#xff09;内存编号是从0开始记录的&#xff0c;一般用十六进制数字表示。可以利用指针变量保存地址指针变量的定义和使用指针变是定义语法: 数据类型 …...

安卓小游戏:俄罗斯方块

安卓小游戏&#xff1a;俄罗斯方块 前言 最近用安卓自定义view写了下飞机大战、贪吃蛇、小板弹球三个游戏&#xff0c;还是比较简单的&#xff0c;这几天又把俄罗斯方块还原了一下&#xff0c;写了一天&#xff0c;又摸鱼调试了两天&#xff0c;逻辑不是很难&#xff0c;但是…...

NC113 验证IP地址

验证IP地址_牛客题霸_牛客网 描述 编写一个函数来验证输入的字符串是否是有效的 IPv4 或 IPv6 地址 IPv4 地址由十进制数和点来表示&#xff0c;每个地址包含4个十进制数&#xff0c;其范围为 0 - 255&#xff0c; 用(".")分割。比如&#xff0c;172.16.254.1&#…...

珠宝企业如何利用私域实现业绩增长?

近年来私域的流量不断兴起&#xff0c;各行业都在做私域&#xff0c;所处行业不同&#xff0c;企业所采取的私域打法也会针对性地改变。而在珠宝行业&#xff0c;针对珠宝产品高价、低频的消费特点&#xff0c;企业又该如何搭建私域应对策略&#xff1f; 快鲸scrm系统整理了几…...

回收站清空了还能找回来吗?回收站恢复的4个方法(最全)

回收站作为一个数据回收的地方&#xff0c;可以保存已删除的文件很久&#xff0c;直到用户手动永久删除这些数据&#xff0c;这为用户避免了许多数据丢失的问题。但是回收站数据过多&#xff0c;难免会影响电脑的运行速度。为此&#xff0c;我们都会定期进行清理。 清理过程中…...

深度解析React性能优化API

性能优化一直是前端领域讨论的一个热门问题&#xff0c;但在平时沟通及code review过程中发现很多人对于React中性能优化理解很模糊&#xff0c;讲不清楚组件什么时候更新&#xff0c;为什么会更新&#xff0c;关于React性能优化的文章虽然比较多&#xff0c;但大多数都是在罗列…...

算法刷题打卡第91天:统计一个圆中点的数目

统计一个圆中点的数目 难度&#xff1a;中等 给你一个数组 points &#xff0c;其中 points[i] [xi, yi] &#xff0c;表示第 i 个点在二维平面上的坐标。多个点可能会有 相同 的坐标。 同时给你一个数组 queries &#xff0c;其中 queries[j] [xj, yj, rj] &#xff0c;表…...

sentinel持久化方案

一.sentinel规则推送原理 1.原有内存规则存储原理 (1)dashborad中请求到服务器后&#xff0c;在controller中通过http把规则直接推送给client&#xff0c;client接收后把规则放入内存&#xff1b; 2.持久化推送规则原理 ![在这里插入代码片](https://img-blog.csdnimg.cn/1…...

软件项目进度安排与跟踪:关键路径的计算

在一个软件项目中&#xff0c;管理人员需要按时了解项目进度&#xff0c;制定项目计划&#xff0c;同时需要及时发现所遇到的问题&#xff0c;然后和团队成员制定解决方案&#xff0c;确保整个计划可以顺利的进行&#xff0c;因此项目进度安排与跟踪是项目管理中的一个重要环节…...

mac m2 处理器 iterm2 sz rz 出错/无限重试

mac m2 处理器 iterm2 sz rz 出错/无限重试 1、背景 apple m 系列处理器安装的 homebrew 跟 intel 处理器略有不同&#xff0c;其中安装目录的区别&#xff1a; m 系列处理器安装目录为 /usr/local/bin/homebrewintel 处理器安装目录为 /opt/homebrew 其中 m 系列处理器安装…...

Mysql 与 磁盘交互的过程

从之前的Mysql架构可以了解到&#xff0c;Mysql 客户端不是直接和磁盘打交道&#xff0c;我们在客户端输入的sql语句会被发送给服务端&#xff0c;服务端对sql语句进行解析、缓存等操作&#xff0c;然后再交由存储引擎去读写磁盘。这其实是从 C/S 的角度去了解Mysql。 站在OS的…...

Spring Cloud Gateway集成Nacos实现负载均衡

&#x1f4a1;Nacas可以用于实现Spring Cloud Gateway中网关动态路由功能&#xff0c;也可以基于Nacos来实现对后端服务的负载均衡&#xff0c;前者利用Nacos配置中心功能&#xff0c;后者利用Nacos服务注册功能。接下来我们来看下Gateway集成Nacos实现负载均衡的架构图一. 环境…...

Excel图表教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 Excel图表初学者教程 - 从简单和简单的步骤学习Excel图表从基本概念到高级概念&#xff0c;包括简介&#xff0c;创建图表&#xff0c;类型&#xff0c;柱形图&#xff0c;折线图&#xff0c;饼图&#xff0c;圆环图&#xff0c;条形图&#xff0c;面积图&#xff0c…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...