常用的解决移动端布局的方案大概有：1.flex弹性布局1）高度定死，宽度自适应，元素都采用px做单位。2）随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻），这样就实现了『适配』。2.百分比3.用框架搭建页面4.viewport适配4.1 优点：1）避免复杂的计算，直接使用UI的标准像素值4.2 缺点：2）不能使用m
在页面引入这段js代码(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' :
原创
2021-06-29 10:17:13
258阅读
在页面引入这段js代码(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {
原创
2021-06-29 10:17:13
94阅读
作者：清风皓月一.涉及技术点vite版本vue3ts集成路由集成vuex集成axios配置Vant3移动端适配请求代理二.步骤vite+ts+vue3只需要一行命令npm init @vitejs/app my-vue-app --template vue-ts配置路由npm install vue-router@4 --save在src下新建router目录，新建index.ts文件import
上一回说到了媒体查询结合rem做移动端布局，步骤如下 首先设置媒体查询，确定html中font-size值的变化 @media all and (max-width:320px){ html{font-size:12px;} } @media all and (min-width:321px) an
转载
2020-05-14 10:23:00
202阅读
2评论
rem布局（等比缩放布局）rem布局 好处： 不同设备下看起来比较协调。 坏处： 显示的内容并不会在大屏幕展示的内容多。em : 是一个相对单位，1em等于当前元素或父元素的font-size值。
1em == 1个font-size的大小
rem : 是一个相对单位，1rem等于根元素的font-size值。
1rem == 1个根元素
转载
2024-07-06 05:23:23
44阅读
移动web开发之rem布局rem基础rem单位rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。/* 根html 为 12px */
html {
font-size: 12px;
}
/*
转载
2024-08-27 17:08:32
131阅读
移动端网页 rem 自适应布局
在各种屏幕大小手机上实现自适应效果，用rem单位，根据手机屏幕大小自动改变(包括横屏和竖屏时)：文字大小，图片大小，布局宽度大小等！
原创
2016-11-08 13:09:56
1128阅读
1、viewport.js 2、使用 页面中直接引用viewport.js即可。
转载
2019-01-07 17:01:00
172阅读
2评论
以上为基于320的设计稿，若要基于375，只需将mixin中320改为375即可。若要100px=1rem，只需将mixin中10改成100即可。当然，这只能实现大部分常规机型的适配，有些特殊机型还是需要自己再加上对应的适配。 接下来罗列一下我用到过的适配，希望得到各位帮助逐步完善。 原文地址：ht
转载
2022-05-05 11:38:02
127阅读
如果你看了很多篇文章，对 flexible 的解决方案一直还有一种不太了解的朦胧感觉，那么这篇文章会帮你从背景角度一步一步解析为何会有 flexible 这套解决方案，以及这套解决方案是如何作用的。 为什么不能直接用 px 进行布局 设计师基于 iphone6（375px 逻辑像素） 的页面尺寸给了
转载
2020-10-14 19:31:00
219阅读
2评论
x在网页中我们会使用以下代码，动态修改font-size的值，以达...
原创
2023-01-26 11:10:21
189阅读
rem布局是现在比较流行的移动端布局，掌握了这种布局方式后，可以很轻易的实现布局自适应手机屏幕。目前淘宝首页就是采用的这种布局方式。我曾经上网查过很多资料，看过很多解释原理的和使用方法的，可是还是一脸懵逼，可能我是一枚女程序员，脑子转不过来，必须要弄得很清楚透彻才能想明白这个布局的原理。后来我自己在纸上琢磨，用数学公式成功把自己弄明白了。希望也能帮到大家。就像一道数学题一样，见下题：首先，假设UI
第一步：先写好重置的样式。直接复制粘贴即可 @media all and (max-width: 320px){ html{ font-size: 12px; } } @media all and (min-width: 321px) and (max-width: 375px){ html{ fo
转载
2020-05-14 10:19:00
124阅读
2评论
前言在移动端页面开发过程中避免不了对页面做适配，适配方案说多还是挺多的，接下来主要讨论一下rem和em。兼容性ios：6.1系统以上都支持android：2.1系统以上都支持大部分主流浏览器都支持，可以安心的使用~一、remrem是基于页面根元素html字体大小来设置，例如给html元素设置font-size: 30px; p元素的font-size: 0.5rem;可以使用geComputedS
转载
2024-10-31 15:21:38
47阅读
使用rem适配移动端在main.js设置字体大小//以屏幕宽度为375为例const winWidth = window.innerWidth;//获取屏幕宽度c
document.documentElement.style.fontSize = innerWidth /16 +'px' window.onresize = function(){ document.documentElement.style.fontSize = innerWidth /16 +'px' } document.getElementsByTagN
原创
2022-03-28 16:26:51
121阅读
本文主要写给刚接触移动端开发的同鞋们。首先先将几个主要概念讲一下；什么是移动端？移动端故名思义是为移动终端，大名叫移动通信终端，是指可以在移动中使用的计算机设备。其实就是我们常说的手机。什么是布局？前端开发中布局是将主要的html结构布置好。rem是什么？rem是一种长度单位，是而且仅是根据根元素html改变的长度单位。Root em（REM）是CSS3中新定义的一种长度单位。和之前的em(根据父
转载
2021-05-04 21:38:26
1320阅读
2评论
rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似
转载
2024-04-21 15:37:27
114阅读
刚换公司，设计稿还没出，也没有安排新任务，所以抽空整理一下移动端布局方式。移动端布局方式整理：1.固定meta视图 <meta name="viewport" content="width=750px,user-scalable=no"> 这种写法中，利用meta标签，将视图宽度定位了750px，固定值，也就是ios6的标准，然后css也是基于750px的设计稿进行布局优点：前
