前文介绍了rem，在这里介绍两种实际使用rem的例子;flexible.js可伸缩布局使用两种方式的优劣： 1、第一种方式使用上更为简单，第二种需要把样式文件从scss 转为css文件比较麻烦; 2、第一种只能px转为rem,第二种在这一功能上，也提供出了rem转化px的功能 3、第二种需要将scss编译成css 再修改和编写 不如第一张方便flexible.js 源码//designWid
在移动端开发时，我们常常要使用rem适配页面元素大小。那么如何把px转为rem单位就是必做的换算。我们有2种方式快速的解决这个问题：1.使用less，因为less支持变量和运算。2.使用VS Code的第三方插件：cssrem，它能自动帮我们把px为单位的数据，转换成rem单位的数据接下来就介绍下该插件的使用方法。一、安装与安装其他插件没有差别，只需要打开VS Code的扩展窗口，然后在搜索框中输
转载
2024-02-20 13:08:45
281阅读
今天是正式开始前端学习的第一天！根据老师要求每周写一篇文章，以此自勉并作自我反省！！！VSCode快捷键ctrl+~ : 快速打开终端窗口ctrl+d : 选中目标代码后，使用该快捷键可快速向下进行寻找（找出与目标代码中一样的代码位置在哪）ctrl+f : 当你选中某目标代码后，使用该快捷键可打开替换窗口，并对所有相同目标代码进行便捷替换（按回车即可）ctrl+x : 快速删除选中行代码ctrl+
JavaScript (ES6) code snippets //JavaScript (ES6)代码片段插件
jQuery Snippets //jQuery代码片段插件
Live Server
HTMLAuto Close Tag自动闭合HTML/XML标签，必装Auto Rename Tag修改标签时自动重命名配对的HTML / XML标签，必装样式HTML CSS SupportCSS 自动补齐css navigation按Ctrl+鼠标点击即可跳转到class对应的css样式区域cssrem(px to rem & rpx)在VSCode中的px和rem单位之间转换，并支持
转载
2024-05-17 14:16:27
1054阅读
Emmet扩展JSX语法在编辑器的左下角设置里找到设置-在左侧的扩展里找到Emmet,在右侧找到这个插件的Include Languages – 在settings.json中编辑"emmet.includeLanguages":{
"javascript": "javascriptreact"
},回到设置界面,右侧找到 Trigger Expansion On Tab 勾选现在就可以在inde
转载
2024-04-07 10:46:20
261阅读
文章目录前言环境改变字体的步骤1. 首先找到插件的github repo地址2. 在repo里面搜索font关键字3. 在repo里面搜索.css4. 修改font.css文件5. 修改VSCode的配置小结备注参考文献 前言如题，本文主要讲述VSCode中的markdown文件输出为pdf的时候，如何改变字体等样式。环境VSCodeMarkdown pdf插件已安装，如下图：改变字体的步骤我先
在移动端开发时，我们常常要使用rem适配页面元素大小。那么如何把px转为rem单位就是必做的换算。我们有2种方式快速的解决这个问题： 1.使用less，因为less支持变量和运算。 2.使用VS Code的第三方插件：cssrem，它能自动帮我们把px为单位的数据，转换成rem单位的数据 接下来就介绍下该插件的使用方法。 一、安装 与安装其他插件没有差别，只需要打开VS Code的扩
转载
2024-02-23 13:31:15
1819阅读
本篇文章给大家总结分享30个让开发效率倍增的实用VSCode 插件，让你的日常开发工作效率倍增，希望对大家有所帮助！1. Image preview通过此插件，当鼠标悬浮在图片的链接上时，可以实时预览该图片，除此之外，还可以看到图片的大小和分辨率。2. Auto Rename Tag使用该插件，可以在重命名一个 HTML 标签时，自动重命名 HTML 标签的开始和结束标签。避免只修改了开始标签，而
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。特点：1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 pt是一个物理长度单位，指的是72分之一英寸。9pt=12px，可以依次换算。&n
转载
2024-02-19 20:15:21
32阅读
公式转换——PXtoEM 如果你是第一创建弹性布局的，最好在身边准备一个计算器，因为我们一开始少不了很多的计算，有了他放心。 像素对于我们来说太密切了，因此我们也将从这开始。首先需要计算出1px和em之间的比例，然后是知道我们需要的px值。通过前面的介绍，大家都知道1em总是等于父元素的字体大小，因此我们完全可以通过下面的工式来计算： 1 ÷ 父元素的font-size × 需要转换的像素值 =
先看没有适配前的效果，下面是没有适配前，使用的是px单位，代码和效果如下：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前端解决项目适配问题</title>
<style type="text/css">
.outside
转载
2024-10-10 15:27:30
68阅读
前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。技术栈vue-cli：使用脚手架工具创建项目。postcss-pxtorem：转换px为rem的插件。自动设置根节点html
移动端布局长度单位转换一、场景描述二、实现方式1.安装2.配置3.其他配置三、多规则配置 一、场景描述一般我们做移动端网页开发时，设计稿一般都是固定的宽高的（比如750*1334）。但是实际上手机的屏幕大小千奇百怪，各种各样都有。这就要求我们开发人员很好的去处理兼容性问题。一般做长度兼容有两种方式，一种是使用rem，一种是使用vw、vh。这里就说一下将px转换为vw、vh。二、实现方式众所周知，
转载
2024-10-03 15:28:40
68阅读
Asp.net大型项目实践系列 第二季 发布后得到了大家的鼓励和支持，相对于博客园近期充斥的各种面试贴，职场贴，人生贴，新闻贴的浮躁态势，大家的反馈让我感到一丝欣慰。我会尽量把这个系列写好，不辜负大家的希望。 哥欲善其事，必先利其器...做软件项目不是请客吃饭，不是做文章，不是做毕业设计，也不是做个小Demo。它是对各种技术和思想的综合应用，是对你智商，情商，体力的变态考验。所以在开
转载
2024-09-04 19:18:14
31阅读
1、local history历史记录插件安装这款插件之后在侧边栏会出现LOCAL HISTORY的字样，每当我们保存更改时，它都会备份一份历史文件，当我们需要恢复之前版本时，只需要点击一下对应的文件即可。此外，它还会在编辑框显示对比详情，能够让你对修改位置一目了然。2、Partial Diff文件比较插件选中一代码，右键Select Text for Compare，选中另外一部分代码，右键Co
Visual Studio Code代码想要同时编辑多处，该怎么实现呢？1. 重命名变量首先看看自己需要同时修改多处的代码是不是要重命名一个变量，如果是的话，有现成的快捷键f2使用方法：选中一个变量，按f2 或者 按 Fn + f2，具体依据电脑品牌而定！弹出一个小窗口，在里面输入内容后按回车，所有该变量都会被重命名。效果如下：注意:在js文件中，如果这个变量没有用var或者const或者let声
转载
2024-10-08 11:15:25
96阅读
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code介绍：此中文（简体）语言包为 VS Code 提供本地化界面。TODO Highlight介绍：高亮显示代码中的TODO、FIXME和其他注释。// settings.json
"todohighlight.isEnable": true,
"todohighlig
转载
2024-09-29 12:16:56
140阅读
pxPixel 像素，相对长度单位。像素是相对于显示器分辨率而言。rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。小程序规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px。即小程序的750rpx就等于屏幕的宽度，1rpx=（屏幕宽度/750）px。r
猿生不能只有 Ctrl + C 和 Ctrl + V，还要有 Ctrl + D。工欲善其事，必先利其器。今天给大家带来了博主学习前端一年多以来偷懒 ，呸~ 提升效率必备的 40 个 vscode 插件。看完觉得有帮助的记得点个赞~HTML 标签自动闭合 – Auto Close Tag 身为一个前端程序猿，打 HTML 标签那必须是快速的，vscode 本身就提供了标签自动闭合的功能。但是对于一些
转载
2024-04-28 16:00:18
87阅读
