一，原因既然看到这篇博客，说明各位已经知道为啥要做rem适配，以及rem适配的原理。 写这篇博客的原因在于，网上很多postcss-pxtorem 插件的配置都无法生效（原因在于创建项目的工具如vue-cli版本等的不同），生生地浪费了很多时间。于是重新整理下，套用下个神棍点地说法，就是亲测有效~~哈哈。二，使用postcss-pxtorem 的方法0，无效原因我的项目是使用vue-cli3创建的
前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。技术栈vue-cli：使用脚手架工具创建项目。postcss-pxtorem：转换px为rem的插件。自动设置根节点html
转载
2024-02-26 12:46:39
280阅读
至今除了小程序没怎么接触过移动端，问了下朋友移动端都是怎么做适配的 1.rem，这个单位转换比较麻烦，特意问了下有没有什么可以自动转的，这里给出一个叫px2rem-loader的工具，和lib-flexible一起使用的 2.boots tarp这个框架，，已经很久没用了，留个标记需要的时候去捡起来 ...
转载
2021-08-19 16:02:00
229阅读
2评论
px to re插件 px转rem
原创
2023-07-01 00:15:50
212阅读
目录1、创建一个项目并启动2、设置根字体大小和单位转化3、去掉边框距离4、css的嵌套使用5、连接到手机上显示6、vant ui 库的使用6.1 基础用法6.2 底部导航栏7、模拟锤子商城7.1 请求数据7.2 解决跨越7.3 组件切换7.4 轮播图的实现 1、创建一个项目并启动npm init vue@latestcd demonpm installcode .npm run dev2、设置根
在移动端开发时，我们常常要使用rem适配页面元素大小。那么如何把px转为rem单位就是必做的换算。我们有2种方式快速的解决这个问题： 1.使用less，因为less支持变量和运算。 2.使用VS Code的第三方插件：cssrem，它能自动帮我们把px为单位的数据，转换成rem单位的数据 接下来就介绍下该插件的使用方法。 一、安装 与安装其他插件没有差别，只需要打开VS Code的扩
转载
2024-02-23 13:31:15
1805阅读
安装npm install px2rem-loader lib-flexible --save 入口文件main.js加上import 'lib-flexible/flexible.js'在index.html加上 <meta name="viewport" content="width=device-width,initial-scale=1.0"> <met...
原创
2021-08-26 11:21:26
512阅读
安装npm install px2rem-loader lib-flexible --save 入口文件main.js加上import 'lib-flexible
原创
2022-03-08 14:40:36
435阅读
前端页面适配 不同设备分辨率不一样，因此需要页面适配 前端如何做页面适配？ css媒体查询实现响应式布局 这种方式的缺陷就是需要编写多套适配样式代码 css3 rem单位 W3C对rem的定义: font-sise of the root Element. 即根元素的fontsize大小 rem: ...
转载
2021-09-24 00:38:00
929阅读
2评论
Layui框架-图标组件&按钮组件Layui概述Layui的获取Layui的目录结构Layui的引入 Layui概述layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。l
转载
2024-09-15 08:45:33
150阅读
一、父传子//父组件
<template>
<div id="app">
<Subassembly :Properties="Properties"/>//绑定一个属性挂载要传输的变量
</div>
</template>
<script>
import Subassembly from '组件路径';
expor
vscode全网最详细使用教程（让你编码快上10倍）一、快速编写HTML代码初始化HTML文档需要包含一些固定的标签，比如、、等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键： 2. 轻松添加类、id、文本和属性连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo： 连续输入类和id，比如p.bar#foo，会自动生成：1 <p cl
本文参考文献：[1] javascript的typeof返回哪些数据类型[2] js的隐式转换1、javascript的typeof返回哪些数据类型1.返回数据类型 undefined、string、boolean、number、symbol(ES6)、Object、Function2.强制类型转换Number(参数
transition过渡属性属性描述值举例transition简写，包含4个过度属性transition:width 1s linear 1s;transition-propertycss属性的名称all:所有属性都将获得过渡效果。transition-property:height;transition-duration过渡效果花费的时间，默认0transit
vue-cli3.0实现移动端自适应，亲测有效项目使用vue3.0编写代码，说要打包成apk文件，在安卓上看，现在需要适配移动端的样式，记录一下，亲测有效。安装插件vue脚手架略过lib-flexible : 会自动在html的head中添加一个<meta name="viewport">的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根
转载
2024-09-12 06:54:09
153阅读
移动端：运行在移动设备上的产品移动设备：手机、平板、touch...我们以后做的产品大部分都只需要适配IOS系统和安卓系统即可响应式布局：在不同的设备上都能给予客户最好的操作体验产品：APP：手机应用，目前市面上流行的APP产品大部分都是原生APP开发者做的，但是目前市场上正在趋于使用JS来开发原生的APP：react native、phoneGap...H5：HTML页面，都是运行在浏览器中的
当我们准备在移动端写HTML的时候，首先需要考虑到手机显示屏幕的大小与PC的差异性。我们可以通过两种方式进行媒体查询来区分移动端和PC端的访问用户。第一种，<style>
@media (min-width:500) and (max-width: 1000px)
.class{ background: #ccc; }
</style>当屏幕尺寸大于500像素且小于1000
vue项目移动端、pc端适配方案vue项目移动端、pc端适配方案lib-flexible 根据屏幕宽度，自动设置html的font-size
postcss-px2rem 自动将px单位转换成rem
一、安装 lib-flexible和 postcss-px2remnpm i lib-flexible -S
npm i postcss-px2rem -S简要介绍这两个包的用途：lib-flexi
转载
2024-04-04 11:38:14
1538阅读
PX特点1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本
1、移动端系统包括：// Ios、android、windows phone、black berry2、移动端的浏览器// safari、chrome、firefox3、屏幕尺寸：1、像素
设备像素 pt(物理像素/尺寸、分辨率)、
css像素px(视觉像素/尺寸)
2、屏幕尺寸 （对角线指的是xxx英寸）// 通常iphone6 1334x750指代的是屏幕宽高的发光点数3、PPI，像素密度&
