移动开发两种适配方法

柔情只为你懂 2022-11-21 09:52 125阅读 0赞

# 定值 #

编写时直接使用 rem 单位进行布局

1.  完美视口设置
2.  总宽 375 布局
3.  以 font-size 100px 进行尺寸换算，设置 rem
4.  增加 JS 代码进行页面适配

<html lang="en" style="font-size: 100px;">

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center]

# 定比例 #

选择一个设计稿宽度的比例尺寸作为根元素的字体大小

1.  完美视口设置
2.  通过 JS 设置页面的根元素字体大小。可以除以 10 也可以除以其他的数字
3.  根据设计稿使用 rem 设置元素大小

在less文件中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center 1]  
然后再引入

<link rel="stylesheet" href="./card.css">

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/48228a602eef4b1c9d9c3ca1810d6dd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201031145528410.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg==,size_16,color_FFFFFF,t_70#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，125人围观）

还没有评论，来说两句吧...

相关阅读

相关 web开发中移动端适配

这个话题有些复杂，说起来有些琐碎，因为和移动端适配相关的问题太多了。 1. 概念 1.1 设备像素设备像素被称为物理像素，它是显示设备中一个最小的物理部件。每个像素可以

桃扇骨/ 2023年08月17日 17:35/ 0 赞/ 90 阅读

相关前端解决移动端适配的五种方法

移动端适配的五种方法所谓移动端适配，就是WebApp在不同尺寸的屏幕上等比显示第一种方法：viewport适配原理：通过设置 `initial-scale`

た入场券/ 2022年12月13日 01:30/ 0 赞/ 284 阅读

相关移动开发两种适配方法

定值编写时直接使用 rem 单位进行布局 1. 完美视口设置 2. 总宽 375 布局 3. 以 font-size 100px 进行尺寸换算，设置 rem 4

柔情只为你懂/ 2022年11月21日 09:52/ 0 赞/ 126 阅读

相关移动端适配

rem计算JS方式计算尺寸参照的标准尺寸 750px 换算比例为 100:1 （100px=1rem 50px=0.5rem 5px=0.05rem）

Bertha 。/ 2022年10月19日 05:39/ 0 赞/ 416 阅读

相关移动端适配

移动端适配一、移动端适配是什么？二、基本概念 1.移动端设备视口 2. 什么是rem? 三、解决方案 1. 调

客官°小女子只卖身不卖艺/ 2022年08月31日 01:46/ 0 赞/ 428 阅读

相关移动端适配

转自：/images/20220528/a9ac319170c44a5d85b86b4f83df39bf.png 大多都是介绍手淘团队的[flexible.js][

怼烎@/ 2022年05月27日 23:28/ 0 赞/ 432 阅读

相关移动终端适配

[使用Flexible实现手淘H5页面的终端适配][Flexible_H5] [如何在Vue项目中使用vw实现移动端适配][Vue_vw] [Flexible_H5]:

骑猪看日落/ 2022年04月23日 06:54/ 0 赞/ 186 阅读

相关移动端适配

1、首先在html页面中引入meta标签 <meta name="viewport" content="width=device-width, initial-sc

水深无声/ 2022年03月17日 06:14/ 0 赞/ 386 阅读

相关移动端适配

移动端适配 1、html <meta name="viewport" content="width=device-width,initial-scale=1.0

冷不防/ 2022年01月29日 03:13/ 0 赞/ 472 阅读

相关移动端适配

在上一片文章里，关于如何使用rem进行布局，我作了一个大概的描述。今天这篇文字，主要说一个东西－dpr。我们都知道，移动端开发，运行的平台主要是 ios 和 andr

野性酷女/ 2022年01月25日 18:23/ 0 赞/ 470 阅读