2025年viewport和移动端布局：（2025年移动端布局rem）

布局常用解决方案对比(媒体查询、百分比、rem和vw/vh)

1、在前端开发中，自适应布局对于适应不同分辨率的设备至关重要。常见的自适应解决方案包括媒体查询、百分比、rem和vw/vh单位。以下内容将从px单位出发，逐步分析和对比这些自适应布局方案。首先，理解px单位在移动端布局中的局限性。在静态网页中，px通常作为单位来描述元素的宽度、高度以及定位信息。

2、后面出现 流式布局 ，使用百分比 % 定义宽度，高度使用 px 固定，根据可视区域大小实时进行尺寸调整，通常使用 max-width/min-width 控制尺寸范围过大或者过小。这种方案实现比较简单，但在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。

3、在CSS中使用百分比、rem、em、vh、vw等相对值来定义元素的大小和间距，这样元素的大小会根据视口的变化而动态调整。采用自适应布局：利用CSS3的Flex布局和Grid布局，这些布局方式能够参照容器空间动态调整元素大小，实现布局的平衡。可以结合栅格系统，进一步简化跨设备的转换。

4、相对单位包括em、rem、ex、ch、vw、vh、vmax和vmin。em单位基于父元素的字体大小进行计算，rem基于根元素的字体大小计算。ex和ch单位用于排版，而vw、vh、vmax和vmin单位则基于视窗尺寸，用于创建全视区界面。绝对单位包括px、pt、pc、cm、mm、in。

手摸手带你学移动端WEB开发

1、手摸手带你学移动端WEB开发的核心内容包括：视口的理解与应用：布局视口：浏览器默认设置，常见宽度为980px，适合PC端页面在手机上的显示，但需手动缩放。视觉视口：用户实际看到的网页区域，可缩放调整而不影响布局视口宽度。理想视口：宽度与设备屏幕宽度相同，无需手动缩放即可浏览完整页面。

2、通过“设置”中的“启用或关闭Windows功能”来激活HyperV。安装Docker Desktop：按照引导完成Docker Desktop的安装。开启Kubernetes功能，并为其分配足够的CPU和内存资源。下载并安装Istio：从Istio官网下载针对Windows的安装包。解压安装包，并将解压后的bin目录添加到系统环境变量中。

3、在Windows系统中安装Istio可能对部分用户来说不够直观，但其实我们可以采取一些步骤来实现。首先，确保你的Windows系统具备Hyper-V功能，可以通过“设置”中的“启用或关闭Windows功能”来激活。接着，安装Docker Desktop，按照引导完成安装并开启Kubernetes，为其分配足够的CPU和内存资源。

4、人从椅子上站起来，或擦拭墙壁等过程（最初的电荷分离发生在衣物或其他相关物体外表面，然后，人体由感应带电。（2）人在高电阻率材料制成的地毯等绝缘地板上走动（最初的电荷分离发生在鞋和地板之间，然后，对于导电性鞋，人体由电荷传递而带电；对于绝缘鞋，人体是因感应而带电）。

一文搞懂,vue中pc端与移动端适配解决方案(亲测有效)

移动端适配：移动端视口有布局视窗、视觉视窗和理想视窗，通过调整viewport来控制页面缩放，如使用阿里团队的高清方案。方案一中，通过设置viewport的缩放比例来保证高清效果，解决1px物理像素问题。方案二则是采用两套页面分别针对移动端和PC端。方案三推荐使用postcss-pxtorem和amfe-flexible进行工程化配置。

移动端适配方案 1 基础概念 viewport即视窗、视口，用于显示网页部分的区域，在PC端视口即是浏览器窗口区域，在移动端，为了让页面展示更多的内容，视窗的宽度默认不为设备的宽度，在移动端视窗有三个概念：布局视窗、视觉视窗、理想视窗。

作用域插槽 对于需要从插槽内容中获取子组件数据的情况，Vue3提供了作用域插槽解决方案，通过传递对象属性或解构来实现数据共享。总的来说，插槽是Vue3中不可或缺的组件交互方式，熟练掌握它能提升开发效率和组件的灵活性。建议深入研究Element UI等组件库中插槽的使用，以便在实际项目中得心应手。

使用mixin前，首先需要创建一个包含mixin逻辑的文件。在Vue项目中，通常在`src/mixins`目录下创建mixin文件。局部混入 在单个组件中，可以通过`mixins`选项局部引入mixin。这样，mixin中的方法和属性可以直接在组件中使用。全局混入 要在整个应用程序的所有组件中使用mixin，可以在Vue实例创建时全局引入。

第一步骤 在vue.config.js文件中module.exports={}中添加 devServer：{ proxy：{ /profile：{//指定路径要跨域请求地址 //在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题 //将/api开头的url转发到target上。

REM布局原理

1、在网页布局中，em、rem和meta标签扮演着关键角色。em是相对于其父元素字体大小的单位，而rem则是相对于根元素（body）的字体大小单位，这意味着它不受具体元素影响，而是全局设定的。物理像素与逻辑像素的区别在于设备像素比。物理像素是硬件的固定单位，而逻辑像素则随着设备屏幕的不同而变化。

2、rem布局的本质是等比缩放，通过更改html元素的字体大小，让子元素实际大小发生变化。通过js设置html字体大小为屏幕宽度的百分之一，实现rem布局。使用vw和vh单位可以替代rem实现响应式布局，vw单位等于视口宽度的1/100，vh单位等于视口高度的1/100。rem在兼容性和控制最大宽度方面有一定的局限性。

3、流体的布局其实就是宽度带百分比，高度带定值，宽度带百分比的布局，以适应不同宽度的屏幕。为了适应手机上不同尺寸的屏幕，我们可以在定义元素宽度的时候写百分比。该百分比是相对于屏幕宽度的，因此所有宽度都可以是自适应的。在高度方向，因为网页的高度是不确定的，所以我们可以把高度写成一个固定值（px）。

4、这里以上图为例，因为每一台手机的屏幕横向的大小是固定的，如果使用px则可能在小屏幕出现位置不可控，导致内容换行错乱等问题。故使用rem/rpx单位布局。