vue rem移动端适配

p.p1 { margin: 0.0px 0.0px 0.0px 36.0px; font: 14.0px Tahoma; color: #e36c0a; background-color: #ffffff }
p.p2 { margin: 0.0px 0.0px 0.0px 36.0px; font: 12.0px "PingFang SC"; color: #000000; background-color: #d9d9d9 }
p.p3 { margin: 0.0px 0.0px 0.0px 36.0px; font: 10.5px "PingFang SC"; color: #000000; background-color: #eeeeee }
p.p4 { margin: 0.0px 0.0px 0.0px 36.0px; font: 12.0px "PingFang SC"; color: #000000; background-color: #ffffff }
p.p5 { margin: 0.0px 0.0px 0.0px 36.0px; font: 12.0px "Courier New"; color: #404040; background-color: #eeeeee }
p.p6 { margin: 0.0px 0.0px 0.0px 36.0px; font: 10.5px Helvetica; color: #404040; background-color: #eeeeee }
p.p7 { margin: 0.0px 0.0px 0.0px 36.0px; font: 10.5px "PingFang SC"; color: #404040; background-color: #eeeeee }
span.s1 { }
span.s2 { font: 14.0px "PingFang SC" }
span.s3 { background-color: #ffffff }
span.s4 { font: 12.0px "PingFang SC"; background-color: #ffffff }
span.s5 { font: 10.5px Helvetica }
span.s6 { font: 12.0px Helvetica }
span.s7 { font: 12.0px "PingFang SC"; color: #000000; background-color: #ffffff }
span.s8 { font: 12.0px Helvetica; color: #000000; background-color: #ffffff }
span.s9 { font: 10.5px Helvetica; background-color: #dddddd }
span.s10 { font: 10.5px "PingFang SC"; background-color: #dddddd }
span.s11 { font: 10.5px "PingFang SC" }
span.s12 { font: 12.0px "Songti SC" }
span.s13 { font: 12.0px "Courier New" }

参考:https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

首先先弄清楚几个基本的原理知识:

物理像素:又称设备像素,是显示设备中一个最微小的物理部件;

设备独立像素:可认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素),然后由相关系统转换为物理像素

设备像素比 = 物理像素 / 设备独立像素,可通过js的window.devicePixelRatio获取,或css的-webkit-device-pixel-ratio

********ps: iPhone6,设备宽高为375pt*667pt,相当于设备独立像素,dpr=2,那么物理像素就为750pt*1334pt********

1、安装fleible

npm install lib-flexible –save

2、在main.js引入

Import ‘lib-flexible’

3、安装px2rem,使得我们在开发中不需要自己手动计算,照常写px

npm install px2rem-loader --save-dev

4、在build目录下的utils.js修改配置

p.p1 { margin: 0.0px 0.0px 13.0px 0.0px; font: 16.0px "Songti SC"; color: #00b050 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px Helvetica; color: #c00000 }
span.s1 { }
span.s2 { font: 16.0px "Times New Roman" }
span.s3 { font: 12.0px "PingFang SC" }
span.s4 { font: 12.0px "PingFang SC"; background-color: #ffffff }
span.s5 { background-color: #ffffff }

重新开启项目,750设计稿,按设计稿来写px;

注意要点:1、在index.html的头部,不要设置meta name=‘viewport‘;

2、考虑到字体文件自带的点阵尺寸,不希望出现15、13px这种奇数字号,字号依然使用px;如:font-size:28px;/*px*/

3、对于1px像素border,为了避免在部分安卓手机丢失,在其后面添加/*no*/,使其不转化为rem单位,如:border:1px solid #000;/*no*/

个人看法:对于flexible适配方案,查阅源码,可得知它对于安卓手机的处理,是统一dpr设置为1来处理,但近年来,国内各个品牌安卓手机的使用人群比例逐渐增加,将其统一处理为1,在大屏幕手机的体验,有失偏颇。

*****如有不同观点或者错误,欢迎指出,好人一生平安~~~

p.p1 { margin: 0.0px 0.0px 13.0px 0.0px; font: 14.0px "PingFang SC"; color: #000000; background-color: #ffffff }
p.p2 { margin: 0.0px 0.0px 13.0px 0.0px; font: 16.0px "Times New Roman"; color: #00b050 }
p.p3 { margin: 0.0px 0.0px 13.0px 0.0px; text-align: justify; font: 14.0px Helvetica; color: #000000 }
span.s1 { }
span.s2 { font: 14.0px Helvetica }
span.s3 { font: 16.0px "Songti SC" }

原文地址:https://www.cnblogs.com/sansgun/p/9259927.html

时间: 2024-10-09 00:01:32

vue rem移动端适配的相关文章

rem 移动端适配

rem移动端适配: 在移动端(手机端.Pad端),设备尺寸参差不齐.如果想要写完一套代码,能够在所有移动设备上都正常运行,那么采用原生的px单位来设置是不行的.举个例子:iPhone6的尺寸是375px,如果我们想要一个盒子是占据整个宽度的一半,那么会将这个盒子的宽度设置为187.5px,但是并不是所有手机的宽度都是375px,因此就会造成问题.这时候我们可以通过rem来解决这个问题. 什么是rem: em:当前元素字体大小相对于父标签的字体大小.比如: <div style="font-

rem移动端适配方案

一. rem vs em 单位 定义 特点 rem font size of the root element 以根元素字体大小为基准 em font size of the element 以父元素字体大小为基准 二.js计算 为了避免造成因为动态设置<html>元素的font-size而造成页面抖动,一般这部分代码我们放在header底部去加载,并内联到html文档里面. <script> const oHtml = document.getElementsByTagName(

vue中移动端适配

最近需要完全新建vue项目,基于vue-cl3搭建项目框架时,又开始纠结px,rem等单位问题,看了很多博客 目前最好用的单位是rem.vw 目前最常用的适配方案是: 普通元素:按照设计稿大小,使用px,再利用工具转化为rem font字体大小:使用px不进行rem转化,对不同的dpr分别设置大小,类似如下: div { width: 1rem; height: 0.4rem; font-size: 12px; // 默认写上dpr为1的fontSize } [data-dpr="2"

如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html  原文网址 如何在Vue项目中使用vw实现移动端适配 作者:大漠 日期:2018-01-25 点击:10362 vw Layout 布局 Vue mobile 编辑推荐:使用 Coding.net 搭建静态博客,自定义域名,全站 HTTPS 加密,自动实时部署, 立即托管您的网站! 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页

基于vue-cli3的vue项目移动端样式适配,lib-flexible和postcss-px2rem

1,安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save 简要介绍这两个包的用途: flexible会为页面根据屏幕自动添加<meta name='viewport' >标签,动态控制initial-scale,maximum-scale,minimum-scale等属性的值. 例如在Galaxy S III: 例如在iphone6/7/8: po

移动端适配之rem 笔记

/*移动端适配 width|height|font-size = 视觉稿量出来的值 / 100rem;@lbl*/ @media screen and (max-width:359px) and (min-width:320px) { html,body{ font-size: 50px !important; } } @media screen and (max-width:374px) and (min-width:360px) { html,body{ font-size: 56.25px

移动端适配之REM

随着手机等移动设备的普及,移动端带来的流量已经不可忽视,一个网站不只是只有pc的页面就足够了,移动端的适配已经势在必行.但是移动设备种类繁多,屏幕尺寸也千奇百怪,能不能找到一种方式可以适配所有的手机屏幕呢? 答案就是rem. 俗话说 “授人以鱼不如授人以渔”,但今天我就反其道而行,就是授人以鱼的.因为要跟你说什么设备像素比.css像素.ppi等东西,估计你会晕的(主要是我也搞不懂).废话不多说,先上代码. 1 /*移动端适配 width|height|font-size = 视觉稿量出来的值 /

Rem实现移动端适配

移动端适配 web页面跑在手机端(h5页面) 跨平台 基于webview() 基于webkit 常见适配方法 pc端采用display:inline-block,让div盒子横着排 移动web:采用定高,宽度百分比,flex弹性布局,meDIA QUERY 媒体查询: 媒体查询 结合css,通过媒体类型(screen.print)和媒体参数(max-width) @media screen and (max-width: 320px){ /* css在屏幕跨度<=320px时这段样式生效 */

移动端适配rem

第一种:根元素为100px,再按照750设计稿转化成vw单位,这样只要按照设计稿的单位/2即可.如果是小程序,不需要除以2. html{ font-size: 26.66vw; //移动端适配 这里使用rem+vw方案 省去媒体查询 } 第二种:媒体查询 按照750设计稿,根元素是100px,兼容性比较好. html { font-size: 625%; /*100 ÷ 16 × 100% = 625%*/ } @media screen and (min-width:360px) and (m