前端移动端适配移动端适配
安装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阅读
所谓前端适配，就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果，目前比较流行的方法有两种。各有利弊，使用第一种在某些浏览器的webview里面会出现兼容问题，而且对于1像素会无法渲染。而用rem的方案在背景和字体上也会有某些问题。方案一：强制meta viewport的宽度为设计稿的宽度把下面的代码放在头部，然后制作稿跟PC上一样的制作就行// 根据设计稿的宽度来传参 比如640 7
转载
2024-03-20 21:14:51
60阅读
一. 移动端适配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阅读
一，媒体查询二，rem三，rem应用四，实际应用五，less应用六，解决方案
原创
2022-10-27 16:15:35
178阅读
web端：css:1，不同浏览器的标签默认的margin和padding不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：可以使用Normalize来抹平默认样式的差异。也可以使用如下代码：* { margin:0; padding:0; } 2，图片默认有间距问题症状：几个img标签放在一起的时候，有些浏览器会
转载
2023-12-12 16:49:39
86阅读
总结下自己用过的几种移动端适配方法百分比适配宽度高度按照所占百分比计算 写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阅读
1. 引言
随着移动设备的普及和互联网的发展，越来越多的用户通过移动设备访问网页。因此，前端开发人员需要关注并适配不同尺寸的移动设备，以提供更好的用户体验。本文将介绍前端响应式设计和移动端适配的概念，并通过一个实际的例子来说明如何实现。
2. 前端响应式设计
前端响应式设计是指网页能够根据用户的设备和屏幕尺寸自动调整布局和样式，以适应不同的屏幕大小。通过使用CSS媒体查询和弹性布局等技术，可以实现
原创
2023-08-29 09:17:47
291阅读
微信浏览器图片上传 一年前给公司写过一个手机端项目，一个基于vue框架的项目，主要适用手机浏览器、微信浏览器。遇到的最让人头疼，最麻烦的bug就是微信浏览器图片上传问题。选择图片的时候直接打开文件然后就到了这里： 这个时候再点图片点击之后关闭相册但是图片并不会填充到页面中。必须点左上角展开到这里，再选择相册才能成功上传： 这样对于用户来说体验自然是
转载
2024-06-14 13:49:54
26阅读
为什么要是用 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评论
这两天在做移动端首页，总结一下移动端相关的知识点。移动端基础viewport在未设置meta标签时，viewport一般为980px。 viewport主要有以下几个设置： width：数值（不带单位），device-width height：数值（不带单位），device-height initial-scale：初始缩放值 minimum-scale：最小缩放值 maximum-s
这里我写一下我自己用的vue 移动端适配 ，可能跟别人的不一样。但是效果是一样的。我
转载
2023-02-27 15:46:50
737阅读
一、为什么要做适配为了适应各种移动端设备，完美呈现应有的布局效果各个移动端设备，分辨率大小不一致，网页想铺满
原创
2022-03-25 16:55:01
229阅读
本文为Varlet组件库源码主题阅读系列第八篇，读完本篇，可以了解到移动端页面如何适配各种尺寸的屏幕，包括pc端，另外如何将触摸事件转换成鼠标事件。移动端适配开发移动端页面，我们通常都会按照一个固定宽度的设计稿来做，但是实际上的手机屏幕尺寸五花八门，如果不进行适配的话会比较影响使用体验。Varlet组件库的设计就是基于375px宽度的设计稿，然后使用postcss-px-to-viewport进行
# 实现jquery 移动端适配教程
## 概述
在移动端开发中，我们通常需要对页面进行适配，以确保页面在不同终端设备上显示效果一致。本文将教你如何使用jquery实现移动端适配。
## 流程
```mermaid
flowchart TD
A(准备文件) --> B(引入meta标签)
B --> C(设置viewport)
C --> D(编写css媒体查询)
``
原创
2024-04-13 03:20:28
188阅读
