这里我写一下我自己用的vue 移动端适配 ，可能跟别人的不一样。但是效果是一样的。我
转载
2023-02-27 15:46:50
733阅读
1. 设置动态根字号大小，/public/phone-adapt.js，在index.html中引入 (function (doc, win) { const docEl = win.document.documentElement; const resizeEvt = 'orientationch ...
转载
2021-10-22 13:21:00
898阅读
2评论
配置 flexible安装 lib-flexible1.在命令行中运行如下安装：npm i lib-flexible --save2.在项目入口文件 main.js 里 引入 lib-flexible引入 li
转载
2023-01-03 15:05:51
534阅读
页面的适配，就是一个页面能在PC端正常访问，同时也可以在移动端正正常访问。现在我们可以通过弹性布局【Flexible布局】、媒
原创
2023-10-07 10:15:10
437阅读
配置 flexible安装 lib-flexible1.在命令行中运行如下安装：npm i lib-flexible --save2.在项目
转载
2023-01-03 15:05:51
325阅读
1，先看看网上关于移动端适配讲解再聊移动端页面适配，rem和vw适配方案！
原创
2022-03-29 11:15:00
2793阅读
目录背景自定义标题 custom-page-title原理解决办法:PS.注意代码使用示例使用注意参考资料 背景vue 编写小程序代码,打包为小程序,小程序原有title样式不太符合,所以自己写了个通用的自定义title,便于各个页面复用.自定义标题 custom-page-title原理为了使我们的项目更好的适配所有的机型，那么就需要先分析一下： 我们可以发现： Android 跟 iOS 顶
vue项目pc端和移动端适配1、pc端适配一、样式中根据设计稿确定缩放比例（可以设置全局或者部分页面）二、监听窗口大小改变，设置根字体大小 created() {
// 获取当前设备的宽度，设置rem的根字体大小
let width = window.innerWidth;
width = width <= 1200 ? 1200 : width;
const htmlObj = d
转载
2024-05-21 10:54:56
2691阅读
Vue 移动端、PC 端适配可以使用 lib-flexible、amfe-flexible、postcss-pxtorem、postcss-px2rem 和 postcss-px-to-viewport 这几个插件。 &n
转载
2024-02-18 20:23:38
1406阅读
前言前段时间我的移动端适配解决方案[2]一文在评论区引发了激烈的讨论。其中讨论最多的就是，移动端rem的适配已经淘汰了，目前大家使用的都是viewport。lib-flexible作者也在github明确的表示lib-flexible这个解决方案可以放弃使用了。由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有
一．今天是朱可夫将军学习IOS开发的第一天，先来介绍一下什么是IOS，ios是由苹果公司开发的手持设备操作系统，它占据了现今智能手机的半壁江山，是手机应用开发者的不二之选。话不多说，直奔主题：１.IOS开发使用的工具是Xcode，现选用Xcode６.３；２.在IOS的众多框架中，其中有两个最为常用的框架：Foundation框架和Cocoa框架；2.1Foundation框架简介：在OSX下的Ma
1.删除功能：需求：就是点击删除会弹出弹框--根据选择---删除相应的内容 实现的思路：1.利用element组件找到对话框或弹出层，然后进行相应的修改即可（注：这里需要传递id）代码展示：①布局忽略 只有js部分//删除是需要调用接口的 并且需要传递相应的id 如：
（具体操作参照接口文档）
// 删除权限
export function delPermission(id
转载
2024-08-30 11:32:28
481阅读
一种理想方案首先，无论换算方不方便，我都不想换算，我也不想去操心什么转换系数其次，有些属性或者类选择器我不想进行转换css代码要足够简洁，我只希望看到一种单位，那就是px第一种：lib-flexible+postcss-pxtorem第一种方案是lib-flexible+postcss-pxtorem，在相当长一段时间里，这两个插件搭配都是解决移动端布局的神器，lib-flexible是阿里手淘系
2018-4-19日更新适配到安卓低版本的插件buggyfill(是我疏忽导致大家以为vw解决方案兼容范围过小，原第六步css-modules改为buggyfill，css-modules顺延为第七步)2018-4-16日更新css-modules配置，前面步骤不变，可直接跳到第七步。写在前面的话在接触到大漠先生牵头开发的vw解决方案之前，我使用的是阿里的第一代适配解决方案 lib-flexibl
手淘适配解决方案阿里巴巴淘宝团队出品的amfe-flexible是一个用于解决移动端不同机型适配的包。在其源码中，通过不同屏幕的像素比来设置scale值，保证当前窗口的device-width始终等于物理像素设备的宽度。从而达到不同机型的适配效果。当然，要达到完全适配，我们不仅仅只用到amfe-flexible还需要用到postcss-pxtorem。postcss-pxtorem是将我们在css
转载
2024-09-21 08:50:02
145阅读
哈喽，各位小伙伴，欢迎来到我是wangfang呀的博客！我是我是wangfang呀，虽然还在编程的“菜鸟”阶段，但我已经迫不及待地想和大家分享我一路上踩过的坑和学到的小技巧。如果你也曾为bug头疼，那么你来对地方了！今天的内容希望能够给大家带来一些灵感和帮助。
概述：响应式设计的需求与实现
随着移动互联网的普及，响应式设计（Responsive Design）成为现代 Web 开发中不可或缺的
vue项目移动端、pc端适配方案lib-flexible 根据屏幕宽度，自动设置html的font-sizepostcss-px2rem 自动将px单位转换成rem一、第一步先安装 flexible和 postcss-px2rem（命令行安装）npm i lib-flexible -S
npm i postcss-px2rem -S简要介绍这两个包的用途：flexible会为页面根据屏幕自动添
转载
2024-10-08 19:47:09
751阅读
移动端开发适配2种方案总结针对移动端适配的方案~一： 第一种方案是：所有的单位使用rem来适配；首先在页面上设置html的font-size的大小；如下我项目中的设置：html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html {
转载
2024-02-26 19:25:45
114阅读
一、移动端多设备适配 参考了手机淘宝： 针对安卓所有设备，devicePixelRatio(简称dpr)，统一当作“1”处理，即一倍屏；然后viewport的宽度就等于device-width，但是淘宝的做法是没有对viewport的width做明确指定，仅指定了scale值；因为浏览器实际上会根据scale来设置viewport的宽度； 针对ios，则存在2倍
原创
2015-09-24 16:21:09
1587阅读
这两天回头巩固知识点，才算真正的了解了rem（一直以为就直接用就行，尴尬）啥是remrem是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。rem布局原理： 拿到设计稿，按照来...
原创
2022-09-06 14:52:12
61阅读
