移动端开发适配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阅读
2018-4-19日更新适配到安卓低版本的插件buggyfill(是我疏忽导致大家以为vw解决方案兼容范围过小，原第六步css-modules改为buggyfill，css-modules顺延为第七步)2018-4-16日更新css-modules配置，前面步骤不变，可直接跳到第七步。写在前面的话在接触到大漠先生牵头开发的vw解决方案之前，我使用的是阿里的第一代适配解决方案 lib-flexibl
1. 什么是移动web用于展示在移动设备上的网页(web)，称之为移动端页面。 移动设备泛指手机、平板等设备。2. 如何调试移动web页面真机调试：需要服务器环境，网络环境，以及多部手机。 :point_right: 目前还没有学习服务器技术，网络环境也不具备，所以暂时无法进行真机调试。浏览器模拟：一些浏览器为前端开发者提供了真机调试模拟环境。例如：chrome。 打开开发者工具，点击手机图标即可
转载
2023-08-01 15:29:37
545阅读
移动开发不同与PC端开发，可能会经历各种意想不到的问题，尤其是移动端应用刚起步的几年；随着移动互联网的快速发展，有些问题已经得到了很好的支持，如1像素边界的问题。当然，要更好地解决这些移动端的问题，就需有移动端领域相关的知识，下面就来说说。dpr设备像素比首先说一下，这个dpr不仅仅是移动端才有的，pc端也有，但是对一些移动端的问题产生的原因及解决显得比较重要，比如1像素的问题。先来看几个概念：物
转载
2024-06-24 15:55:03
321阅读
这里我写一下我自己用的vue 移动端适配 ，可能跟别人的不一样。但是效果是一样的。我
转载
2023-02-27 15:46:50
737阅读
一、大屏项目屏幕分辨率适配:1366*768 和 1920*1080 和 2560*1440 和 4096×2160和其他二、css方案选择:1、字体大小以 “相对单位rem” 为单位更合适(以 1920*1080 的设计稿为基本尺寸设置 rem 值)(字体相对单位)2、大的布局的宽高以 “相对单位vh,vw” 为单位更合适(视窗相对单位,高宽占满)3、内容的布局使用%,display:flex
转载
2024-06-02 23:39:30
2377阅读
1、一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发css增加cursor:pointer2、三星手机遮罩层下的input、select、a等元素可以被点击和focus(点击穿透)发现于三星手机，这个在特定需求下才会有，因此如果没有类似问题的可以不看。首先需求是浮层操作，在三星上被遮罩的元素依然可以获取focus、click、change)，有两种解决方案，
转载
2024-06-03 06:20:31
38阅读
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阅读
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阅读
场景1 移动端和pc端风格类似，内容可复用： 直接媒体查询 @media screen and (max-width: ***px)； 根据屏幕大小设置样式 场景2 风格差别比较大，内容不可复用，但接口可复用； 放在同一工程下，新建手机端文件夹，编写相应路由。 在app.vue页面编写，根据打开页面 ...
转载
2021-11-03 19:27:00
2545阅读
2评论
本文将介绍如何使用Trigger.io创建原生的顶部栏、标签栏、以及HTML/CSS/JavaScript的混合型移动应用程序。以后我们将添加更多的原生UI组件到Trigger.io，但现在你只需要使用web技术就可以在IOS和Android上创建漂亮而流畅的移动应用。这是一个简单的菜谱应用程序的屏幕截图，我们使用Trigger.io提供的原生UI组件，我们将向你展示该应用程序是如何构建的：配置T
转载
2024-01-22 17:43:37
129阅读
视口在前一段时间，我曾经写过一篇关于viewport的文章。最近由于在接触移动端开发，对viewport有了新的理解。于是，打算重新写一篇文章，介绍移动端视口的相关概念。关于这篇文章说到的所有知识，本质上离不开以下代码<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, min
转载
2024-06-28 20:01:12
553阅读
1.删除功能：需求：就是点击删除会弹出弹框--根据选择---删除相应的内容 实现的思路：1.利用element组件找到对话框或弹出层，然后进行相应的修改即可（注：这里需要传递id）代码展示：①布局忽略 只有js部分//删除是需要调用接口的 并且需要传递相应的id 如：
（具体操作参照接口文档）
// 删除权限
export function delPermission(id
转载
2024-08-30 11:32:28
481阅读
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
public class MovePic extends KeyAdapter{
JFrame jf
转载
2023-06-27 16:34:45
88阅读
1，先看看网上关于移动端适配讲解再聊移动端页面适配，rem和vw适配方案！
原创
2022-03-29 11:15:00
2793阅读
目录背景自定义标题 custom-page-title原理解决办法:PS.注意代码使用示例使用注意参考资料 背景vue 编写小程序代码,打包为小程序,小程序原有title样式不太符合,所以自己写了个通用的自定义title,便于各个页面复用.自定义标题 custom-page-title原理为了使我们的项目更好的适配所有的机型，那么就需要先分析一下： 我们可以发现： Android 跟 iOS 顶
