vscode 原生H5项目实现移动端适配（px-to-rem）

最新推荐文章于 2024-04-16 16:53:16 发布
最新推荐文章于 2024-04-16 16:53:16 发布
阅读量1.9k 收藏 5
点赞数 2
文章标签： css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QingHan_wow/article/details/108980722
版权
  1. vscode里下载插件px-to-rem
  2. 假设Ui给的设计稿尺寸是750*1334,我们先alt+s，设置1rem=75px后enter保存
  3. 写css的时候就按照px来写，然后alt+z转换成rem
  4. 再页面初始化的时候，window.onresize监听手机尺寸，设置1rem是window.innerWidth/10 px，即设置document.documentelement的fontsize
  5. 此时，页面就已经适配了
QingHan_wow
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
h5应用如何适配移动端(干货总结)
qq_48896417的博客
04-13 1921
H5应用的开发是前端必备技能,h5适配移动端也是业务常见的场景,如何进行必要的适配,今天做一个比较全面的总结。
H5移动端适配postcss-pxtorem，postcss-px-to-viewport
哎呦哥哥的博客
09-07 2911
当前移动端比较流行的两种适配方式， 一种是将px转换为rem,另一种是将px转换为vw。 postcss-pxtorem+amfe-flexible postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem amfe-flexible 用于设置 rem 基准值 安装 # yarn add amfe-flexible npm i amfe-flexible main.js 中加载执行该模块 import 'amfe-flexible' 使用 postcss-pxtorem
uniapp小程序用vscode运行h5
a1111131的博客
04-16 517
uniapp小程序项目改成h5,如果用HbuilderX模版搭建的项目,项目打包只支持HbuilderX自动化打包不支持npm打包,jinkens自动化更不可能.**解决方法:**找到manifest.json文件,更改treeShaking里面的值为false,然后重启。**解决方案:**使用cli搭建一个新项目(空壳),再把之前的小程序代码塞进去,然后安装npm i安装依赖,基本上所有项目都会有node sass版本问题。在my-test项目中的package.json文件中。
vscode-plugin:一个vscode插件，包含一键调试移动端功能
04-06
share-develop-helper 畅享信息前端开发小助手,使用前需要安装依赖npm install iceworks -g 功能 1.区块开发可视化； 2.编辑器内使用区块（待实现）； 3.protable快速生成； 4.快速生成函数式组件； 5.shareui组件在线文档； 6.集成spy-debugger远程调试移动端页面； 使用示例 1、pro-table快速生成 在js文件里面输入pt-，根据提示回车； 2、快速生成ProTable Modal Component的代码片段 在js文件里面输入ptmc-，根据提示回车； 3、快速生成函数式组件：在js文件里面输入cfc,根据提示回车； 4、进行区块开发，有下面两种办法： 点击侧边栏的小图标进行操作； 快捷键Ctrl+shift+p，再打开的输入栏里面输入，share-add-block； 5、使用区块有下面两种办法： 点击侧
VSCode一个简单的vue移动端适配方案
weixin_34284188的博客
09-27 1865
在index.HTML下用JS动态配置viewport我这里UI给的设计图都是750px，所以750px / 15(份) = 50 rem (function(){ var pixRatio=1/window.devicePixelRatio; document.write('<meta name="viewport" content="width=device-...
[css]VScode中移动端适配插件cssrem的使用
小钿钿不忘初心的博客
06-11 2131
1.安装插件 vscode扩展商店搜索 “cssrem"插件 2.运行并修改配置 先启动插件，之后选择设置->扩展设置 根据实际设计稿设置基础字号 配置好了之后就可以重启vscode。 3.搭配js代码编程 在项目中创建一个自动修改基准font-size的js脚本 cssrem.js，在index.html里body标签下引入一下，我这里是设置的100倍，也就是100px=1rem。 fnResize(); window.onresize = function () { fnResize
移动端rem适配方案以及vscode中cssrem的使用设置
csstmg的博客
07-02 2863
rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素(rem)一个是依赖父元素计算(em)。 无设计稿 首先需要在标签中加入 <meta name="viewport" content="width=device-width,ini.
vscode 写的代码能在手机上访问 详细步骤
vbind的博客
04-28 8464
在vscode下载Live Server插件和更改windows ip设置，具体操作如下： 下载vscode插件 设置windows ip win+R 打开终端输入：ipconfig 重点 找到SDN 服务器: 2. 找到设置ipv4窗口： 3. 4. 5. 手机和电脑连同一个wifi的情况下，再把vscode生成的网页网址前面的IP换成本地的IP 最后发送到手机执行的效果： 总结：1.通过安装vscode 插件Live Server 来实现网页代码实时预
postcss-pxtorem移动端适配的实现
01-19
执行命令 安装插件postcss-pxtorem npm install postcss-pxtorem -D postcss.config.js 新建package.json同一个目录下，文件内容如下 module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >...
关于vue利用postcss-pxtorem进行移动端适配的问题
10-15
主要介绍了关于vue利用postcss-pxtorem进行移动端适配的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vscode-px-to-viewport-extension
03-27
这是Visual Studio Code的扩展，允许您将px转换为视口（vh和vw），将px转换为min（** vw，** vh）并将px转换为rem。 用法 键绑定 Alt + Shift + W：将选定的文本从px转换为vw（视口宽度）。 Alt + Shift + H：将...
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
今天，我们使用Vue CLI3 做一个移动端适配 。   前言 首先确定你的项目是Vue CLI3版本以上的。 一、移动端适配包 1、安装移动端适配包 npm i lib-flexible -S 2、在 main.js 引入适配包 import Vue from 'vue' ...
大屏自适应/适配方案【详解】（echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem）
朝阳39的博客
08-30 1万+
大屏自适应的核心目标有： 字体大小随屏幕尺寸自适应变化 详见下文 自动撑满全屏 可参考我的博客 弹性布局（使用 css 的flex布局） 可参考我的编程笔记 使用flexible.js + rem实现字体自适应 flexible.js用于根据屏幕尺寸变化动态调整根元素的字体大小。 rem（font size of the root element）则是相对于根元素的字体大小单位。 具体用法如下： 1.新建flexible.js src\pages\AIcall\utils\flexi
关于移动端的尺寸适配，vscode中支持自动转换的插件
xiecong的博客
01-07 1315
支持自动转换的移动端尺寸适配方案
谈谈pc端和移动端自适应
weixin_44984508的博客
07-27 856
做网页时，我们通常需要考虑到不同电脑屏幕尺寸，以及不同手机屏幕大小等问题，解决样式发生改变的情况，那么如何解决呢？现在主要是采用自适应来解决高度，宽度的，以及图片自适应问题，下面就PC端和移动端来总结一下，通常进行自适应高度和宽度，图片时，一般与页面的布局存在关系。 1、最小尺寸分辨率1024*768（传统17寸显示器），则可以采用940px、960px、或者常用的980px作为最小宽度 2、10...
网页自适应pc端和移动端
热门推荐
稳哥的小灶
03-01 2万+
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。  于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？ 下面让木易设计来告诉大家。   很多网站的解决方法，是为不同的设备提供不同的网页，比如专门...
【Vue】屏幕适配（rem响应式布局）
Qxn530的博客
09-01 2万+
使用postcss-px2rem----修改单位、flexible.js+vscode的插件cssrem----修改字体大小、并且配合媒体查询完成不同屏幕的适配
解决Rem的适配问题
asfasfaf122的博客
01-29 1856
关于Rem的适配问题
vite项目 postcss-pxtorem移动端适配
最新发布
06-19
`postcss-pxtorem` 是一个 PostCSS 插件，它用于将像素单位（px）转换为相对单位（如 rem），从而简化移动设备上的响应式设计和适配。Vite 作为一个现代的前端构建工具，支持第三方插件的集成，包括 PostCSS。 在 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值