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. 【做题记录】 [JLOI2011]不等式组

    P5482 [JLOI2011]不等式组 超烦人的细节题!(本人调了两天 QAQ ) 这里介绍一种只用到一只树状数组的写法(离线). 树状数组的下标是:所有可能出现的数据进行离散化之后的值. 其含义为 ...

  2. 关于iview、element-ui重置表单并清除校验的方法

    平时在使用iview或者vue重置表单是时,我会习惯使用 this.$refs[formData].resetFields(); 但是直接这样写上去方法是不起作用的, 内容必须要在每个form-ite ...

  3. SpringCloud微服务实战——搭建企业级开发框架（十五）：集成Sentinel高可用流量管理框架【熔断降级】

      Sentinel除了流量控制以外,对调用链路中不稳定的资源进行熔断降级也是保障高可用的重要措施之一.由于调用关系的复杂性,如果调用链路中的某个资源不稳定,最终会导致请求发生堆积.Sentinel ...

  4. vue2-admin-mpa vue2多页面应用系统【开源项目】

    1. 项目介绍 一个基于Vue2.0的多页面应用系统. 技术栈包含:Vue.VueX.Vue Router.Element UI. 2. 功能介绍 2.1 多页面切换功能 说明:采用 tabs  +  ...

  5. sprint boot 自动创建web应用(3)

    1. springboot自动创建地址:https://start.spring.io/ 2.选择web(springMVC) 3.点击创建 4.创建成功 5.解压,导入项目 6.新建成功 7.原因 ...

  6. JavaScript 简单介绍

    一.简介 JavaScript是一门面向对象的动态语言,他一般用来处理以下任务: 修饰网页 生成HTML和CSS 生成动态HTML内容 生成一些特效 提供用户交互接口 生成用户交互组件 验证用户输入 ...

  7. v-html | 数据内容包含元素标签或者样式

    问题 如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染 插值表达式{{}}和v-text指令被直接解析为了字符串元素. <body> <d ...

  8. NCF 中如何将Function升级到FunctionRender

    简介 历史的车轮在不断的向前推进,NCF也在不断的迭代更新,只为成为更好的NCF 如果你之前没有用过NCF可以跳过这个文档,直接去下载最新的NCF源码进行实践. NCF仓库地址:https://git ...

  9. ES6模块化引入

    //a.js 导出的关键字 export export let str = "laowang"; export function add(a,b){ return a + b ; ...

  10. MarkDown学习内容总结

    MarkDown学习内容 标题 使用方法:通过 # 的个数实现多级标题. 举例如下: 一级标题格式为:# + 空格 + 标题名: 二级标题格式为:## + 空格 + 标题名: 三级标题格式为:### ...