这两天在做移动端首页，总结一下移动端相关的知识点。移动端基础viewport在未设置meta标签时，viewport一般为980px。 viewport主要有以下几个设置： width：数值（不带单位），device-width height：数值（不带单位），device-height initial-scale：初始缩放值 minimum-scale：最小缩放值 maximum-s
如何快速的做到手机端的页面兼容 为什么要写这篇文章前段时间做了一个项目，客户要求最低兼容Iphone5S在线上运营的项目，客户总是提出兼容很差的问题，之前一直拖着，不曾解决，现在统计处理一下 学习重点 lib-flexible插件正文前端兼容的痛点 在实际项目开发过程中，作
移动端基础一、什么是移动Web？产品分类app（手机应用）H5app与H5的优劣势appH5二 、H5运行环境的分类为什么会出现这种模式？三、PC与移动web开发的区别四、移动端屏幕PPI像素分类:屏幕缩放PC端：移动端：DPR：设备像素比Retina屏幕五、移动端浏览器及内核分析PC端浏览器移动端浏览器类型内核六、视口1、布局视口：3、理想视口4、自定义用户代码片七、使用相对长度单位em布局网
先来解释一下：移动端刚兴起那时，PC浏览器的布局视口宽度不适合移动端，因此浏览器厂商决定移动端的浏览器布局宽度和设备宽度不能一致（PC是一致的）否则会造成同一个20%宽度的div，一个196px 一个只有78px（只是举个例子，具体数字没仔细算），为什么要这么做？因为这样才能兼容已有的PC站点啊，这样子PC站点不就可以直接在移动设备访问了吗，虽然效果很差，例如iphone6的375物理像素 980
转载
2024-10-11 17:05:16
82阅读
文章目录vue框架之前后台交互、element-uivuex（了解）前端存储数据库总汇cookielocalStoragesessionStoragevuex(store)前后台交互方式（重点）axios同源策略-跨域问题前后台分离项目交互流程异步请求细节element-uijq+bsDjango国际化配置小结 vue框架之前后台交互、element-uivuex（了解）注：可以完成任意间组件信
转载
2024-07-23 20:55:06
715阅读
一种理想方案首先，无论换算方不方便，我都不想换算，我也不想去操心什么转换系数其次，有些属性或者类选择器我不想进行转换css代码要足够简洁，我只希望看到一种单位，那就是px第一种：lib-flexible+postcss-pxtorem第一种方案是lib-flexible+postcss-pxtorem，在相当长一段时间里，这两个插件搭配都是解决移动端布局的神器，lib-flexible是阿里手淘系
1、Element ui 默认的宽度是420px 在移动端长度太长，需要审批2、解决方案 customClass: 'msgbox' 给弹出框加一个额外的class 名称3、效果
原创
2022-08-06 16:31:32
1857阅读
移动端适配相对于PC端来说，移动端设备分辨率百花齐放，千奇百怪，对于每一个开发者来说，移动端适配是我们进行移动端开发第一个需要面对的问题。在移动端我们经常可以在head标签中看到这段代码：<meta name='viewport' content='width=device-width,initial-scale=1,user-scale=no' />通过meta标签对viewport
1.删除功能：需求：就是点击删除会弹出弹框--根据选择---删除相应的内容 实现的思路：1.利用element组件找到对话框或弹出层，然后进行相应的修改即可（注：这里需要传递id）代码展示：①布局忽略 只有js部分//删除是需要调用接口的 并且需要传递相应的id 如：
（具体操作参照接口文档）
// 删除权限
export function delPermission(id
转载
2024-08-30 11:32:28
481阅读
互联网行业有别于传统行业，面临发布周期频繁、多端、多环境，多机型、多版本共存等问题。为了解决日益增长的快速迭代需求与落后的测试生产力之间的主要矛盾，任何公司都需要一套完备的测试体系，对软件质量进行多重保障。然而对于频繁回归的大量测试需求，人力不足以支撑，手动+自动化测试才是产品快速迭代的根基。本文将对移动端UI自动化测试展开介绍。UI自动化测试介绍 &nbs
转载
2024-07-10 22:41:10
190阅读
文章目录移动端基础浏览器现状手机屏幕的现状移动端调试方法视口布局视口视觉视口理想视口meta视口标签二倍图物理像素&物理像素比多倍图背景缩放background-size二倍精灵图做法移动端开发选择单独制作移动端页面（主流）响应式兼容PC移动端移动端技术解决方案移动端浏览器CSS初始化 normalize.cssCSS3盒子模型box-sizing特殊样式移动端常见布局 移动端基础浏览器
转载
2024-06-24 19:14:43
247阅读
一. 移动端适配1.安装两个插件库 lib-flexible和px2rem-loader flexible.js是淘宝官方H5移动适应解决方案 px2rem会在项目编译的过程中根据根结的font-size值将我们项目css中的px单位转成rem， 其中不需要转成rem的可以写成PX ，UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内，打包适配时不会读取相关css,
转载
2024-04-19 15:21:15
524阅读
移动端适配相对于PC端来说，移动端设备分辨率百花齐放，千奇百怪，对于每一个开发者来说，移动端适配是我们进行移动端开发第一个需要面对的问题。在移动端我们经常可以在head标签中看到这段代码：<meta name='viewport' content='width=device-width,initial-scale=1,user-scale=no' />通过meta标签对viewport
转载
2024-06-17 11:55:03
255阅读
总结下自己用过的几种移动端适配方法百分比适配宽度高度按照所占百分比计算 写css缺点:复杂些的布局就满足不了 不能百分百还原设计图Rem布局 js动态计算html font-size值宽度高度按照320px的设计图切图 rem与之对应的关系是 1rem=20px 用js根据视图宽度计算 html的font-size值function resetRem(){
&n
原创
2015-07-31 21:41:14
894阅读
1px问题 京东商城解决方案：伪元素 + scale .div::after { content: ""; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid #bfbfbf; borde ...
转载
2021-07-12 20:13:00
532阅读
2评论
移动端适配
原创
2018-08-28 08:31:02
990阅读
总结下自己用过的几种移动端适配方法百分比适配宽度高度按照所占百分比计算 写css缺点:复杂些的布局就满足不了 不能百分百还原设计图Rem布局 js动态计算html font-size值宽度高度按照320px的设计图切图 rem与之对应的关系是 1rem=20px 用js根据视图宽度计算 html的font-size值3. vw布局 与r
原创
2015-07-31 21:34:56
1173阅读
移动web开发常见单位 1.什么是像素(Pixel)? 在前端开发中视口的水平方向和垂直方向是由很多小方格组成的，一个小方格就是一个像素；例如div尺寸是100 x 100，那么水平方向就占用100个小方格，垂直方向就占用100个小方格。 2.像素特点 不会随着视口大小的变化而变化, 像素是 ...
转载
2021-06-20 00:30:00
372阅读
2评论
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 remlib-flexible 用于设置 rem 基准值下面我们分别将这两个工具配置到项目中完成 REM 适配。一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）1、安装 # yarn a
转载
2024-05-20 12:33:33
405阅读
使用Vonic UI 开发时如何将Vue.use的语法改为new Vue的语法？作者 stonemakers一般来说，使用vue-cli创建好一个项目的时候，在main.js中会有一个new Vue({ //*** }) .element - 饿了么出品的Vue2的web UI工具套件mint-ui - Vue 2的移动UI元素iview - 基. 库vuetify - 为移动而生的Vue JS
