移动端适配 水深无声 2023-08-17 16:20 171阅读 0赞 视觉稿规范2点：1 以iphone6的 375 \* 667 为基点; 2 对于retina屏幕（dpr=2），为了高清，视觉稿的画布是基准的2倍： 就会变成750\*1334； 在普通屏幕下，1个css像素 对应 1个物理像素；在retina屏幕下，1个css像素对应4个物理像素（也就是说，iphone6下 200\*300的img标签 需要提供400\*600的图片，所以设计稿大小要\*2 影响因素：1 设备物理像素 2 缩放 3 dpr 设置理想视口 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 方法1 固定高度，宽度自适应：垂直方向用定值，水平方向百分比、定值、flex都行。 原理：`<meta name="viewport" content="width=device-width,initial-scale=1">` 方法2 固定宽度，viewport缩放： viewport width使用一个宽度，浏览器自动完成缩放，单位使用px。 原理：需要根据屏幕宽度动态生成viewport,生成的类似`<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">` 方法3 rem做宽度，viewport缩放 根据屏幕宽度设定rem值，需要适配的元素使用rem，不需要是配的元素使用px。 原理：1 动态生成viewport ，设置为1/dpr 2 屏幕宽度设置rem大小，即给 html设置font-size 3 根据设备像素比 window.devicePixelRatio 给设置data-dpt <html data-dpr="2" style="font-size:40px;> <meta name='viewport' content='initial-scale=0.5,...> 这样使不同的设备的rem和px都显示的一样长。 ![983106-20170827140854464-1489369459.png][] 转载于:https://www.cnblogs.com/yxiaoqian/p/7425969.html [983106-20170827140854464-1489369459.png]: /images/20230810/213ebf80d06c4b119343eaab653290bc.png
相关 移动端适配 @charset "utf-8"; /* 涉及到的H5新标签，之后课程做介绍 */ html{ color:000;/*默认字体颜色黑色*... 本是古典 何须时尚/ 2024年04月20日 00:24/ 0 赞/ 80 阅读
相关 vue项目，移动端rem适配（rem移动端适配） 1、首先需要安装第三方插件，这是我们使用自动将 px 单位转化为 rem 单位的插件，命令如下： //可以将 px 单位自动转化为 rem 单位 npm in 朱雀/ 2023年10月02日 23:41/ 0 赞/ 166 阅读
相关 移动端适配 视觉稿规范2点：1 以iphone6的 375 \ 667 为基点; 2 对于retina屏幕（dpr=2），为了高清，视觉稿的画布是基准的2倍： 就会变成75 水深无声/ 2023年08月17日 16:20/ 0 赞/ 172 阅读
相关 移动端适配 rem计算JS方式 计算尺寸参照的标准尺寸 750px 换算比例为 100:1 （100px=1rem 50px=0.5rem 5px=0.05rem） Bertha 。/ 2022年10月19日 05:39/ 0 赞/ 377 阅读
相关 移动端适配 移动端适配 一、移动端适配是什么？ 二、基本概念 1.移动端设备视口 2. 什么是rem? 三、解决方案 1. 调 客官°小女子只卖身不卖艺/ 2022年08月31日 01:46/ 0 赞/ 407 阅读
相关 移动端适配 转自：/images/20220528/a9ac319170c44a5d85b86b4f83df39bf.png 大多都是介绍手淘团队的[flexible.js][ 怼烎@/ 2022年05月27日 23:28/ 0 赞/ 416 阅读
相关 移动端 - 适配方案 1. 百分比适配 2. viewport 适配 3. rem 适配 4. 弹性盒模型 box flex 补充 ╰+攻爆jí腚メ/ 2022年05月26日 10:10/ 0 赞/ 293 阅读
相关 移动端适配 1、首先在html页面中引入meta标签 <meta name="viewport" content="width=device-width, initial-sc 水深无声/ 2022年03月17日 06:14/ 0 赞/ 368 阅读
相关 移动端适配 移动端适配 1、html <meta name="viewport" content="width=device-width,initial-scale=1.0 冷不防/ 2022年01月29日 03:13/ 0 赞/ 449 阅读
相关 移动端适配 在上一片文章里，关于如何使用rem进行布局，我作了一个大概的描述。 今天这篇文字，主要说一个东西－dpr。 我们都知道，移动端开发，运行的平台主要是 ios 和 andr 野性酷女/ 2022年01月25日 18:23/ 0 赞/ 453 阅读
本是古典 何须时尚
朱雀
Bertha 。
怼烎@
╰+攻爆jí腚メ
野性酷女
还没有评论，来说两句吧...