PC端页面转换成手机端页面的分辨率问题的理解

px vw rem

假如就以a4纸模式为设计图 ，在a3纸模式中设计，然后设计出来展示在不同的a4纸模式上

通常是 750px -> 100vw / 750px = 1.333333

rem 是转换了多大纸面积就展示多少相对的模式 ， 因此， 不但能使 a3 以a4模式设计不出问题，还能让 a3 设计出的东西， 在任何a4 模式下的样子比例不变。

vw

- 1vw = 1%视口宽度

设计图的宽度是 750像素  1125像素

视口的宽度是 100vw

0.133333vw = 1px

rem

- 1rem = 1html的font-size

PC端页面转换成手机端页面的分辨率问题的理解的更多相关文章

  1. 【web前端】移动端控制台插件，手机端页面查看相关页面控制台信息

    一般调试手机端页面时,基本是在PC端使用手机模式进行断点或console调试.或查看有用的控制台信息的,但依旧有部分功能无法在PC端调试,经常需要使用alert进行断点,然后在手机端看效果,但是这样并 ...

  2. 移动端(手机端)页面自适应解决方案—rem布局篇

    移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...

  3. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  4. 手机端页面自适应解决方案—rem布局（进阶版，附源码示例）

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

  5. rem手机端页面自适应完美解决方案（最新）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 关于HTML5手机端页面缩放的问题

    通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: <meta name="viewport" content=" ...

  7. 移动端调试神器vconsole,手机端网页的调试工具Eruda

    移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试 移动端调试工具vconsole安装Git地址:https://github.com/WechatFE ...

  8. 【实战问题】【4】Vue写的页面在微信手机端和微信web开发者工具中都能正常显示，但是在微信pc端上显示空白

    原因:pc端微信浏览器不支持es6,而代码中使用了 let . 解决:将 let 改为 var(若使用 es6 语法比较多,可以进行转换,将 es6 语法转为 es5) 参考博客: 1,h5微信页面在 ...

  9. PC端和手机端页面的一丢丢区别

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

随机推荐

  1. 洛谷 P5665 [CSP-S2019] 划分

    链接: P5665 题意: 给出 \(n\) 个整数 \(a_i\) ,你需要找到一些分界点 \(1 \leq k_1 \lt k_2 \lt \cdots \lt k_p \lt n\),使得 \( ...

  2. 文件上传漏洞Bypass总结

    文件上传漏洞Bypass总结 前端JS验证文件类型: 上传后缀jpg,抓包改为php后缀 ======================================================= ...

  3. hdfs基本操作命令

    hdfs文件的相关操作主要使用hadoop fs.hadoop dfs.hdfs dfs 命令,以下对最常用的相关命令进行简要说明. hadoop fs -ls  显示当前目录结构,-ls -R 递归 ...

  4. 树行DP小结

    顾名思义:就是在树上做的DP,依据DFS的性质,在访问过儿子之后返回后将儿子的状态传递给父亲... 先看例题: 此题用贪心也能过,不过正解是DP. 对于树上的DP我们可以直接考虑最优解下各点的状态来方 ...

  5. Django 开发------django-crontab实现服务端的定时任务

    一.需求: 想实现类似 Linux 中crontab 的功能.定时执行计划任务. 二.配置: a.安装插件: # pip3 install django-crontab b.在settings.py ...

  6. WSL2学习和使用汇集

    接触WSL2过程中整理沉淀的一些知识点,大纲如下,内容比较多,详细内容参考https://www.yuque.com/wushifengcn/kb/mbg1b5 欢迎感兴趣者补充和提出问题,共同学习. ...

  7. 理解ASP.NET Core - 日志(Logging)

    注:本文隶属于<理解ASP.NET Core>系列文章,请查看置顶博客或点击此处查看全文目录 快速上手 添加日志提供程序 在文章主机(Host)中,讲到Host.CreateDefault ...

  8. JDK 之 HttpClient(jdk11)

    HttpClient 简介 java.net.http.HttpClient 是 jdk11 中正式启用的一个 http 工具类(其实早在 jdk9 的时候就已经存在了,只是处于孵化期),官方寓意为想 ...

  9. FZU ICPC 2020 寒假训练 4 —— 模拟(一）

    P1042 乒乓球 题目背景 国际乒联现在主席沙拉拉自从上任以来就立志于推行一系列改革,以推动乒乓球运动在全球的普及.其中11分制改革引起了很大的争议,有一部分球员因为无法适应新规则只能选择退役.华华 ...

  10. Spark面试题（五）——数据倾斜调优

    1.数据倾斜 数据倾斜指的是,并行处理的数据集中,某一部分(如Spark或Kafka的一个Partition)的数据显著多于其它部分,从而使得该部分的处理速度成为整个数据集处理的瓶颈. 数据倾斜俩大直 ...