一. 移动端适配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预处器的作用是一种很有挑战性的事情。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值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阅读
总结下自己用过的几种移动端适配方法百分比适配宽度高度按照所占百分比计算 写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阅读
1，不同android api版本的兼容2,不同厂商定制系统的兼容3，不同尺寸分辨率的兼容4，不同cpu框架的兼容5.网络的制式 6.语言国家 7.硬件设备 8.运行商 1、屏幕适配。（网上讲的最多的就是这个。） 由于Android碎片化严重，导致开发中一套代码在不同手机上运行起来效果不是很好，兼容性不是很好，这就需要对不同分辨率，不同屏幕大小的手机做屏
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阅读
视口在前一段时间，我曾经写过一篇关于viewport的文章。最近由于在接触移动端开发，对viewport有了新的理解。于是，打算重新写一篇文章，介绍移动端视口的相关概念。关于这篇文章说到的所有知识，本质上离不开以下代码<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, min
转载
2024-06-28 20:01:12
553阅读
关于移动端屏幕适配的文章网上有很多，大部分都写的很好，而本文是我自己观摩各路大神的文章后的小小总结。flexible方案说到移动端适配，总不免会提到阿里的flexible方案。对于flexible，我总结出以下几点：使用rem实现等比缩放：使用js动态设置html标签的font-size将屏幕宽度按10rem进行计算html标签的font-size为了以后vh、vw兼容计算非常麻烦，生产中要使用c
为什么要是用 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评论
$(function(){ var currClientWidth, fontValue,originWidth; //originWidth用来设置设计稿原型的屏幕宽度（这里是以 Iphone 6为原型的设计稿） originWidth=640; __resize(); //注册 resize事件 window.addEventListen...
转载
2016-07-29 11:05:00
257阅读
2评论
文章目录1. Nginx是什么?2. Nginx的安装2.1 下载2.2 安装2.3 目录结构3. Nginx的简单使用启动: `start nginx.exe`停止: `nginx.exe -s stop`重新加载: `nginx.exe -s reload`4.反向代理4.2 解释4.2 配置一：配置映射通过工具测试是否映射成功二：配置nginx步骤一: 编辑该文件步骤二: 解释server
转载
2024-10-10 14:07:49
82阅读
这两天在做移动端首页，总结一下移动端相关的知识点。移动端基础viewport在未设置meta标签时，viewport一般为980px。 viewport主要有以下几个设置： width：数值（不带单位），device-width height：数值（不带单位），device-height initial-scale：初始缩放值 minimum-scale：最小缩放值 maximum-s
接触移动端网页已经有一段时间 了，一直希望找个机会好好地总结以下，但一直比较懒，所以才拖到了今天。 推荐网站：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阅读
