基于 vue cli3 创建一个移动端项目 安装 postcss 相关插件 由于 vue cli 已经内置了 postcss，只需要安装相关插件，就可以实现 自适应布局。 下面简单的说一下这几个插件的作用。 用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插 ...
分类：
移动开发 时间：
2020-04-06 11:35:30
阅读次数：
131
rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html ...
分类：
移动开发 时间：
2020-04-01 17:47:17
阅读次数：
87
移动端页面大家都遇到过 viewport 的问题。关于 viewport 的文章有很多了，推荐给大家这两篇，写得非常详细。移动端适配方案(上)移动端适配方案(下) 本文对 viewport 做一些补充 手机屏幕 手机屏幕属于硬件属性，我们无论是通过 JS 还是 meta 标签都是无法影响到它的。 手 ...
分类：
移动开发 时间：
2020-03-21 00:05:49
阅读次数：
72
【native app】是安卓和ios 的app 安卓=java ios=oc （在应用里下载） 【混合app】 一个项目既有安卓的页面 也有web app的页面 （部署文件在服务器上） --【web app rem适配方案一】 （function（）{ 没有破坏完美视口，转换需要配合less va ...
分类：
移动开发 时间：
2020-03-15 19:07:17
阅读次数：
79
实际开发搞搞起来！！！！ rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步，我们需要拿到设计稿，安装设计稿的要求来设置一个合适的html字体大小。 第二步，计算元素大小的取值 页面rem = 页面元素值（设计稿） / (屏幕的宽度/划分的份数) (屏幕的宽度/划分的份数) = htm ...
分类：
移动开发 时间：
2020-02-26 17:12:49
阅读次数：
84
一.前提知识 移动端的屏幕尺寸有多种,其中要知道几个知识 物理像素:即设计稿的尺寸 逻辑像素:实体机器的真正像素 下面是我们经常适配的屏幕尺寸 一.rem布局 rem是以根元素字体大小作为参照的布局方式 如下 //以750px设计稿为例,物理像素是375px.设置div宽度为整个容器宽度一半 htm ...
分类：
移动开发 时间：
2020-02-05 20:13:43
阅读次数：
100
还原设计稿，也就是如何适配移动端繁杂的屏幕大小。 通常而言，设计师只会给出单一分辨率下的设计稿，而我们要做的，就是以这个设计稿为基准，去适配所有不同大小的移动端设备。 在此之前，有一些基础概念需要理解。 设备独立像素 以 iPhone6/7/8为例，这里我们打开 Chrome 开发者工具： 这里的 ...
分类：
移动开发 时间：
2020-01-06 19:39:56
阅读次数：
95
1、让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。 2、使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配。 技术方案： 1、less+rem+媒体查询 2、fl ...
分类：
Web程序 时间：
2019-12-31 21:35:23
阅读次数：
105
最近公司几款可以在微信小程序端和H5端同时运行的一套商城，接着就是任务下发喽，但是有一点，时间紧任务重，Boss直接说其他的不管，反正一个半月之内必须上线，~~~头疼。那就只好想办法喽 机缘巧合 京东泰罗版本，研究下，心里小九九就像看一下，谁知道是啥呢，这不看不知道一看吓一跳，先上个图 这简直是一个 ...
分类：
其他好文 时间：
2019-12-21 22:58:57
阅读次数：
163
