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. Python中Numpy及Matplotlib使用

    Python中Numpy及Matplotlib使用 1. Jupyter Notebooks 作为小白,我现在使用的python编辑器是Jupyter Notebook,非常的好用,推荐!!! 你可以 ...

  2. 查看VCS版本的指令

    以本人电脑的安装目录为例:在任意path下打开terminal执行命令行/usr/local/vcs2018/bin/vlogan -ID -full64 /usr/local/vcs2018为VCS ...

  3. 一从二主IIC连接调试

    最近有个项目需要实现快速开机出摄像头预览(2s内),但是我的板子linux上的qt应用起来都要10s左右了,于是在硬件上增加了一个屏驱芯片TW8836,这是一个mcu,可以直接获取摄像头数据送到lcd ...

  4. DeWeb - 物资流转管理系统 - 开发1

    近期一个朋友提到要做一个安卓手机上物资流转管理系统 准备采用deweb练练手! 大致的计划是先做成手机版网页,然后加壳做成APP 一. 登录 界面基本设计如下 用户表设计如下: 待续

  5. Java经典面试题-不古出品

    @ 目录 一.Java 基础 1.JDK 和 JRE 有什么区别? 2.== 和 equals 的区别是什么? 3.两个对象的 hashCode()相同,则 equals()也一定为 true,对吗? ...

  6. Intellij Idea显示回退和前进按钮的方法

    方法1:使用快捷键: 回到上一步  ctrl + alt + <-(左方向键) 回到下一步 ctrl + alt + ->(右方向键) 方法2:在界面显示: View -> 勾选To ...

  7. Django笔记&教程 6-2 表单（Form）基础操作

    Django 自学笔记兼学习教程第6章第2节--表单(Form)基础操作 点击查看教程总目录 1 - 编写表单类 创建新的表单类的代码,一般写到一个专门的forms.py文件中(一般放在对应的app文 ...

  8. 菜鸡的Java笔记 类图

    类图        1.如何实现类图的描述        2.时序图的使用                    从实际i的开发标准:应该在项目编写钱设计类图        而现在的开发大部分情况下, ...

  9. [atAGC050F]NAND Tree

    当$n$为偶数,暴力$o(n)$枚举第一次操作,以下只考虑$n$为奇数的情况 此时,$n-1$即操作次数为偶数,找到最小的$i$(其中$1\le i\le \frac{n-1}{2}$),满足第$2i ...

  10. C#使用Thrift作为RPC框架实战（四）之TSocket

    前言 在前几个小节中我们讲了Thrift框架的基本概念以及重要的名称空间,接下来的几个小节,我们将站在实战的角度来深入讲解一些Thrift的重要类型.本小节我先要讲一下Thrift框架支持TCP通信的 ...