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. [转]DDR相关的一些基础知识

    ODT ( On-DieTermination ,片内终结)ODT 也是 DDR2 相对于 DDR1 的关键技术突破,所谓的终结(端接),就是让信号被电路的终端吸 收掉,而不会在电路上形成反射, 造成 ...

  2. WPF_02_XAML

    XAML(Extensible Application Markup Language的简写)是用于实例化.NET对象的标记语言.XAML对于WPF不是必须的. XAML基础 XAML标准: XAML ...

  3. 在idea中使用eclipse的快捷键

    settings -> keymap 常用 单行注释 Ctrl + / 多行注释 Ctrl + Shift + / 待更新 不常用(但方便) 撤销 Ctrl + Z 反撤销 Ctrl + Y 查 ...

  4. 3D 穿梭效果？使用 UWP 也能搞定

    昨天 ChokCoco 大佬搞了个 3D 穿梭效果出来,具体可见这里: 3D 穿梭效果?使用 CSS 轻松搞定 这个效果太神奇了,他还问我能不能用 WPF 搞出来,因为我完全没用过 WPF 的 3D, ...

  5. Flask WTForm disable choice field

    Flask disable choice field ChoiceField = { render_kw={'disabled':''} } form.my_field.render_kw = {'d ...

  6. 在随着layui官网下架后 layui镜像站起来了

    layui:https://gitee.com/lh_yun/layui 介绍 layui镜像站 「本站仅为 layui 文档保留的镜像站点,与官方无关」 源码地址 在线 pdf 1.主页 https ...

  7. 动手写一个简单的Web框架（HelloWorld的实现）

    动手写一个简单的Web框架(HelloWorld的实现) 关于python的wsgi问题可以看这篇博客 我就不具体阐述了,简单来说,wsgi标准需要我们提供一个可以被调用的python程序,可以实函数 ...

  8. Zabbix错误”zbx_mem_malloc(): out of memory”解决方法

    Zabbix Server突然挂了,查看log报错如下: using configuration file: /etc/zabbix/zabbix_server.conf ... [file:dbco ...

  9. [51nod1587]半现串

    将s所有长度为d/2的子串放进ac自动机中,直接匹配就可以判定半现串了再对其做一个差分,询问一个前缀的半现串个数,在ac自动机上数位dp,f[i][j][0/1]表示走了i步(i位的字符串),走到节点 ...

  10. 七、Hadoop3.3.1 HA 高可用集群QJM （基于Zookeeper，NameNode高可用+Yarn高可用）

    目录 前文 Hadoop3.3.1 HA 高可用集群的搭建 QJM 的 NameNode HA Hadoop HA模式搭建(高可用) 1.集群规划 2.Zookeeper集群搭建: 3.修改Hadoo ...