前面几篇移动端专区博文简单介绍了移动端的概述,以及简单的适配方案,百分比适配,比例缩放适配,viewport适配等,但是难免都有一些各种问题!这次这个rem终极适配方案,是目前移动端的较为完美的适配方案!
移动端web页面的开发适配一直是前端开发津津乐道的话题，在实际开发过程中，移动端和PC端web页面的差异不仅仅体现在设备宽度的不同。由于项目历史背景的原因，下文的方案是团队选择的能较好满足当前项目需求的方案，已经经过线上用户的考验，但不一定是当下最完美的移动端适配解决方案。下文来详细介绍该方案选型。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。
嗯，这种的样式的工作量超级大，因为要对图片和文字等资源针对不同的尺寸进行设置。一种凉凉的感觉从心底飘过～～～
移动端适配，在移动端里经常有遇到，在不同分辨率移动端设备精确还原UI设计稿，这是一个令人抓狂的问题，好在有flex，box布局解决了自适应很大一部分问题。
相信大多数移动端前端开发者都是用过 lib-flexible来作为移动端适配的解决方案。lib-flexible是淘宝项目组开发出来的一个小插件，属于开源项目，可以在各类项目中引入并使用，为移动端的开发者带来了无穷的便利。
[总结]我对移动端适配的了解 不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂商们为其开放了应用入口和系统推广引流入口。这些新能力为前端开发者们带来更强的作战能力。 我们在开发PC站时经常在浏览器兼容问题上耗费巨大的时间，到了移动端，面对webkit内核的Safari与Chrome会舒心很多。b
响应式网站:即pc和移动端共用一套网站，只不过在不同宽度的屏幕下，样式会自动适配。配合媒体查询监听，通过判断屏幕宽度来改变样式，以适应不同终端。例如：三星电子官网: www.samsung.com/cn/ 缺点:制作麻烦，需要花很大精力去调兼容性问题
前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用。
对比总结一下热门的解决方案 通过媒体查询的方式即CSS3的 @media 天猫首页使用的 flex 弹性布局 淘宝首页使用的 rem+viewport缩放（Flexible.js） hot.css ---- ####@media媒体查询 使用方法: @media screen and (max-width: 600px) { /当屏幕尺寸小于600px时，应用下面的CSS样式/ /你的css代码/ } 优点: 移动端和PC维护使用同一套代码时，方法简单，成本低。 可以通过-webkit-device-
很多人聊起移动端适配都是懵逼状态，都想口吐芬芳。难道移动端还要适配，直接px写死，其他自适应不就完了吗？其实不然，要求严格的公司会要求缩放比例完全相同，简单说就是，在每个手机上的每一行的字数都要一样。接下来，我们就要细说移动端适配的前世今生
目前移动端的适配方案一般就是两种，一个是rem方案，一个就是vw的方案，本篇就是一次性讲清楚如何去运用这两种方案来解决问题。 panda-vue-template 手把手搭建vue小商城2.0 1、关于rem rem的原理什么的我就不说了，网上搜文章一搜一大把。 一般是使用手淘的lib-flexible.js，但是这个作为一种过渡方案已经被废弃了，目前已不推荐在你的新项目中使用这个方案来解决手机适配问题。 感兴趣可以看看我老早以前写的这篇-->手机适配问题之rem和lib-flexible,我
CSS布局 确定页面的大致结构，页面分多少块，每块的位置。每个部分怎么把该部分撑起来。 * 早期以table为主(简单) * 之后 以技巧性的布局为主(难) * 现在有flexbox/grid(偏简单) * 响应式布局 在移动端大行其道的时代 是必备的 * table表格布局 * float浮动 + margin * inline-block布局 (用起来方便，但是小问题较多) * flexbox布局 盒模型 如下图所示： 宽度和高度 指的是content的宽度和高度 margin指的是 距离上一个元素
把公共的 页头 、页脚、导航栏、边框 放到最顶层，比方说设置层级为 999，其他每个独立页则放在下面，然后切换页面的时候更新独立页的层级以达到效果图的效果（当然不能超过最顶层）。
最近开发并上线了一款H5项目，在这里想和大家分享一下关于项目中使用到的移动端适配技巧，如果对你们有所帮助的话，就多多点赞收藏😃各位看官老爷别着急，在讲页面适配之前，我们先来捋一捋viewport（视口）的概念~在Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的UI， 菜单栏等——即指你正在浏览的文档的那一部分。一般我们所说的视口共包括三种：布局视口、视觉视口和理想视口1.1 布局视口图片在移动端，布局视口被赋予一个默认值，大部分为980px，这保证PC的网页可以在手机浏览器上呈现，用户可以手动对网
前端涉及到的领域不单单只是PC浏览器了，现在是移动为王的时代，所以大部分的时候还是在做移动端的页面适配。所以这里记录一下在移动端开发的时候遇到的一些问题。
用截图工具（截图工具测得的像素等于物理像素）测得CSS中的1px 的等于物理像素1px的 那么他们的比值就是1：1
3.iPhone6 Plus分辨率414x736，像素1242x2208，@3x，（注意，在这个分辨率下渲染后，图像等比降低pixel分辨率至1080p(1080x1920)
viewport是移动端跨屏适配的基石，吃透这一概念，任何复杂多变的适配需求，都可以手到擒来。
屏幕大小指屏幕的对角线的长度，单位一般是英寸。常见的手机屏幕大小 3.5、4、4.7、5.0、5.5、6.0等。常见手机屏幕查看网址 http://screensiz.es/
优化以前写过的一篇文章：https://www.cnblogs.com/beileixinqing/p/11283315.html
在前面的, 移动端常用适配方案二 有一个弊端那么就是如果有多少套适配窗口就需要编写多少个媒体查询，如果有几百个那么就编写几百个那么不是疯了嘛，那么本文主要介绍的就是更好的解决方案的方式，就是通过 JS 来进行设置, 通过 JS 动态计算当前屏幕每一份大小的好处, 不用写很多的媒体查询, 坏处：切换了屏幕尺寸之后需要刷新界面才有效，而媒体查询如果切换了屏幕的尺寸不需要重新刷新界面，在真实的情况下用户使用的可都是真机，就不会出现不同适配窗口之间的切换问题啦。
响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；
说实话，我一点都不想了解这些名词到底有着什么样的解释，只想知道怎么让开发的页面能适配不同的移动端设备。简单点说，我想知道怎么获取设备的真实开发尺寸（根据这几天查资料所得，这个概念叫逻辑像素）。
import Vue from ‘vue’ import App from ‘./App.vue’
移动端布局中，童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配。那么来讲讲rem在其中起的作用和如何动态设置rem的值。
设备屏幕有多种不同的分辨率，页面适配方案有如下几种： 1、全适配：响应式布局+流体布局 2、移动端适配：
flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。
移动端适配最简单的是通过js动态计算 viewport 的缩放值，但过于粗暴，会导致页面图片文字失真模糊。目前，移动端页面一般使用 rem 或 vw / vh 开发会较为方便，下面以 rem 为例：
完整高频题库仓库地址：https://github.com/hzfe/awesome-interview
虽然我们将移动端独立到一套代码中了, 但是由于移动端也有很多的屏幕尺寸, 所以也需要进行适配，例如：
这里记录下使用最新的Vite+vue3和有赞出品的Vant移动端UI库搭建移动端应用的过程。
前端的一大工作内容就是去兼容页面在不同内核的浏览器，不同的设备，不同的分辨率下的行为，使页面的能正常工作在各种各样的宿主环境当中。
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变 Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。
设计师需要懂代码吗？好像并没有必要。但作为设计师了解一部分的前端知识，对于自身的设计流程改进和团队帮助都会大有裨益。
移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。
在越来越注重用户体验的趋势下，验证码作为一种自打诞生以来就被贴上“多余”标签的产品，更应该给用户提供良好的体验。本文以滑动验证码作为切入点，分析了验证码可能存在的性能问题，并通过资源合并、DOM操作优化和选择性内联打包等方式有效减少页面加载时间。同时本文总结了移动端组件化适配容易遇到的问题，并提供了规范化的解决方案。希望本文能给前端做性能优化的同学提供一些不一样的实践思路。
写在前面：本人刚刚接触移动端开发，希望自己的见解能够帮助到他人，不足之处还望提醒。
移动端rem的适配已经淘汰了，目前大家使用的都是viewport。lib-flexible作者也在github明确地表示lib-flexible这个解决方案可以放弃使用了。
在项目中为了屏幕适配，经常会用到rem，postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件.(下边的方法适用于使用cli2脚手架搭建的项目,现在好多数项目使用cli3搭建,我在后边的文章中增加了对cli3项目自适应的配置.)
说到前端页面的布局方案，可以从远古时代的Table布局说起，然后来到 DIV+CSS布局，之后有了Float布局，Flex布局，Column布局，Grid布局等等。
在 JS 中我们可以通过 window.devicePixelRatio 获取当前的设备像素。
在移动端viewport视口（pc端没有这个概念）就是浏览器显示页面内容的屏幕区域。
现在手机、电脑、ipad成为了每个家庭必备内容，但是通常设计给到我们的都是一个固定大小的UI，如果用户是一个屏幕小或者大的设备，一般就会出现滚动条或者大片空白内容，为了更好的利用一些空间，或者在各种屏幕上都有一个较好的体验，出现了网页设计的概念，自适应的概念，也就是随着屏幕尺寸的不同能够适配各种内容
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
