一. 移动端适配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阅读
总结下自己用过的几种移动端适配方法百分比适配宽度高度按照所占百分比计算 写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评论
预编译器配置说明 开头语，发挥CSS预处器的作用是一种很有挑战性的事情。CSS预处器有不同的语言，就有不同的语法和功能。 语法 在使用CSS预处器之前最重要的是对语法的理解，幸运的是，这三种CSS预处器的语法和CSS都差不多。Sass和LESS都使用的是标准的CSS语法。这使用CSS预处器非常容易的将预处器代码转换成CSS代码。默认Sass使用“.
转载
2024-07-22 13:59:36
61阅读
总结下自己用过的几种移动端适配方法百分比适配宽度高度按照所占百分比计算 写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阅读
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 remlib-flexible 用于设置 rem 基准值下面我们分别将这两个工具配置到项目中完成 REM 适配。一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）1、安装 # yarn a
转载
2024-05-20 12:33:33
405阅读
1，不同android api版本的兼容2,不同厂商定制系统的兼容3，不同尺寸分辨率的兼容4，不同cpu框架的兼容5.网络的制式 6.语言国家 7.硬件设备 8.运行商 1、屏幕适配。（网上讲的最多的就是这个。） 由于Android碎片化严重，导致开发中一套代码在不同手机上运行起来效果不是很好，兼容性不是很好，这就需要对不同分辨率，不同屏幕大小的手机做屏
视口在前一段时间，我曾经写过一篇关于viewport的文章。最近由于在接触移动端开发，对viewport有了新的理解。于是，打算重新写一篇文章，介绍移动端视口的相关概念。关于这篇文章说到的所有知识，本质上离不开以下代码<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, min
转载
2024-06-28 20:01:12
553阅读
https://gitee.com/eric167/pc-rem-demo
原创
2021-07-31 16:04:37
1155阅读
jQuery Mobile和Zepto是移动端的js库。jQuery Mobile相当于PC端的jQuery UI，它提供了很多页面的UI库，能够很快的开发出漂亮的界面，适合公司没有UI设计师的前端开发人员来进行移动端的开发。Zepto相当于PC端的jQuery，它提供了很多方法和功能，能够很快的实现各种需求和功能，适合公司有UI设计师的前端开发人员来进行移动端的开发。jQuery Mobile性
转载
2024-08-12 21:36:11
34阅读
关于移动端屏幕适配的文章网上有很多，大部分都写的很好，而本文是我自己观摩各路大神的文章后的小小总结。flexible方案说到移动端适配，总不免会提到阿里的flexible方案。对于flexible，我总结出以下几点：使用rem实现等比缩放：使用js动态设置html标签的font-size将屏幕宽度按10rem进行计算html标签的font-size为了以后vh、vw兼容计算非常麻烦，生产中要使用c
接触移动端网页已经有一段时间 了，一直希望找个机会好好地总结以下，但一直比较懒，所以才拖到了今天。 推荐网站：www.aol.com 响应式做的很好。 之前我写过一篇关于移动端布局的文章，这里。这篇文章中介绍了大部分的基本知识点，有需要的可以参考。 我们知道常用的布局方案有： 1. 百分比布局，高度固定 第一种布局方式在移动端是不可采取的，尤其是Retina屏的出现。 &
转载
2017-05-03 16:02:23
1412阅读
前端移动端适配移动端适配
安装lib-fiexible 引入 lib-flexible
安装px2rem-loader
配置px2rem-loader
第一种情况：vue-lic 2.x
在 build/utils.js 中，找到 exports.cssLoaders，作出如下修改：
const px2remLoader = {
loader: 'px2rem-loader',
options:
原创
2024-03-07 09:50:00
49阅读
# 使用jQuery适配手机端的步骤
---
为了在手机端使用jQuery，我们需要进行一系列的适配操作。下面是整个过程的步骤概览：
| 步骤 | 操作 |
| --- | --- |
| 步骤一 | 引入jQuery库 |
| 步骤二 | 编写适配手机端的代码 |
| 步骤三 | 添加响应式布局 |
| 步骤四 | 进行测试和调试 |
现在我们来逐步了解每个步骤需要做什么以及相应的代码。
原创
2023-07-31 13:45:33
154阅读
如何快速的做到手机端的页面兼容 为什么要写这篇文章前段时间做了一个项目，客户要求最低兼容Iphone5S在线上运营的项目，客户总是提出兼容很差的问题，之前一直拖着，不曾解决，现在统计处理一下 学习重点 lib-flexible插件正文前端兼容的痛点 在实际项目开发过程中，作
适配器模式是一种结构型设计模式，它允许不同接口的对象协同工作，它通过将一个类的接口转换成客户希望的另外一个接口，使得不兼容的类可以一起工作。适配器模式提高了类的复用性、系统的灵活性和可扩展性，并降低了系统间的耦合度，在实际应用中，例如电源适配器和数据转换器，以及编程中封装老旧接口或第三方库都体现了适配器模式的应用。定义适配器模式（Adapter Pattern）是一种结构型设计模式，它允许对象具有
**手机端适配** 媒体查询 组件统一样式 媒体查询写四套样式 手机 屏幕宽小于768px 平板 屏幕宽 大于等于768px 小于992px 桌面显示器 屏幕宽大于等于992px 小于1200px 大屏幕 屏幕宽大于等于1200px **页面整体及页面内容** 页面看是需要主PC还是主移动端 主移动端的话 一般需要
为什么要是用 viewport 做适配呢？目的就是为了，将所有设备布局视口的宽度调整为设计图的宽度先上完美 viewport 适配代码<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devi
转载
2021-01-17 17:46:35
545阅读
2评论
