作为一个前端人员来说，总结几款相对来说不错的用于移动端开发的UI框架是非常必要的，以下几种移动端UI框架就能基本满足工作中开发需要，根据项目需求，选用合适的框架搭建项目，更能容易提高开发效率。一、MUI 最接近原生APP
移动端适配方案： 1）viewport（scale=1/dpr） 2）rem 3）flex 4）vm/vh一、什么是移动端适配 移动端Web页面，即常说的H5页面、手机页面、webview页面； 手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑安卓/IOS的各种尺寸设备上的兼容，针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备； 目的：在不同尺寸的手机...
转载
2021-06-30 11:14:27
753阅读
为什么要做移动端适配？ 我们开发使用px（CSS pixel）的是逻辑像素，以至于在不同分辨率的设备上同一个UI设计图展示效果会被伸缩变形，所以需要做移动端适配 通过历史进程进一步认识！ 早期诺基亚板砖机时代，样式直男单一、设备少（哪种设备需要即去重新开发一套即可），此时的设备像素比被通俗地固定在1 ...
转载
2021-07-20 22:39:00
211阅读
2评论
移动端适配方案： 1）viewport（scale=1/dpr） 2）rem 3）flex 4）vm/vh一、什么是移动端适配移动端Web页面，即常说的H5页面、手机页面、webview页面；手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑安卓/IOS的各种尺寸设备上的兼容，针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备；目的：在不同尺寸的手机设备上，页面“相对性
转载
2022-02-17 10:46:25
610阅读
一、前言在过去的几年时间里，移动端web野蛮生长，智能机的Android阵营和IOS阵营分庭抗礼，随之产生了多个系统版本（系统版本多样）；五花八门的屏幕尺寸、屏幕展示技术（如大名鼎鼎的Retina技术屏）层出不穷（屏幕尺寸、技术多样），还是CSS的W3C标准在各式各样的移动端浏览器上落实得也是七零八落（浏览器兼容多样）。细看下来移动端Web开发工作面临着很多的多样性，可想而知在这样的不确定性下去开
转载
2021-01-17 20:07:10
473阅读
一、前言在过去的几年时间里，移动端web野蛮生长，智能机的Android阵营和IOS阵营分庭抗礼，随之产生了多个系统版本（系统版本多样）；五花八门的屏幕尺寸、屏幕展示技术（如大名鼎鼎的Retina技术屏）层出不穷（屏幕尺寸、技术多样），还是CSS的W3C标准在各式各样的移动端浏览器上落实得也是七零八落（浏览器兼容多样）。细看下来移动端Web开发工作面临着很多的多样性，可想而知在这样的不确定性下去开
转载
2021-01-17 20:07:16
620阅读
移动端适配rem的两种方法rem是根据你的根元素html的字体大小进行换算的，所以一切换算都要从font-size进行着手。方法一：用media方法就是根据你需要的几台设备来进行设置来进行适配。代码类似如下：html{
font-size: 100px;
}
/* ip6 */
@media screen and (min-width:375px) {
在前面的, 移动端常用适配方案二 有一个弊端那么就是如果有多少套适配窗口就需要编写多少个媒体查询，如果有几百个那么就编写几百个那么不是疯了嘛，那么本文主要介绍的就是更好的解决方案的方式，就是通过 JS 来进行设置, 通过 JS 动态计算当前屏幕每一份大小的好处, 不用写很多的媒体查询, 坏处：切换了
原创
2022-02-13 22:21:00
66阅读
适配的概念：在不同尺寸的手机设备上，页面相对性的达到合理的展示（自适应）或者保持统一效果的等比缩放（看起来差不多）。适配的元素：我们在有尺寸的地方都需要考虑一下适配，一般在字体、宽高、间距和图像（图标、图片）这些元素上。适配的方法有：1、百分比适配；2、viewport缩放适配；3、DPR缩放适配；4、rem适配 --- 目前比较主流的一个适配方法；5、vw、vh适配 --- 可以说这种方法就是为
移动开发的核心是屏幕适配，常见的几种适配方案
原创
2022-10-22 13:25:06
301阅读
解决设备像素和 CSS 像素不一样的问题 如果设备像素和 CSS 像素一样, 那么无需处理不会带来任何负面影响。 如果设备像素是 CSS 像素的 2 倍, 那么我们只需将 CSS 像素缩小一半即可。 但是有时候设备像素可能是 CSS 像素的 3 倍 / 4 倍 ... 获取设备像素比DPR(Devi
原创
2022-02-14 21:52:00
112阅读
通过媒体查询 + rem 虽然我们将移动端独立到一套代码中了, 但是由于移动端也有很多的屏幕尺寸, 所以也需要进行适配，例如： iPhone3/4/5: 320px iPhone678: 375px iPhoneX/plus:414px 当下在企业开发中设计师提供给我们的移动端设计图片是 750*x
原创
2022-02-13 22:07:00
255阅读
通过媒体查询 媒体查询的方式可以说是我早期采用的布局方式, 它主要是通过查询设备的宽度来执行不同的 css 代码，最终达到界面的适配。 媒体查询优势 简单, 哪里不对改哪里 调整屏幕宽度的时候不用刷新页面, 即可响应式的进行展示 特别适合对移动端和 PC 维护同一套代码的时候 媒体查询劣势 由于移动
原创
2021-12-12 22:07:00
152阅读
前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分，如果没有了它，那么你做出来的页面极有可能会出现各种意外（写出来的页面与设计稿之间的差别）。所有我们得找到一种相对来说让人比较满意的解决方案，尽可能地让这种“意外”减到最少。
转载
2018-05-15 19:54:00
155阅读
2评论
概述 这篇文章是基于网易的移动端屏幕适配方案而来的。 （1）思考 在移动端开发中，对于页面屏幕适配要解决哪些问题？ 对于不同的dpr，图片会有模糊的情况，怎么适配？ 对于不同的屏幕宽度，怎么适配？ 对于不同的内容：容器，文字和图片，怎么适配？ 对于移动适配，我个人希望达到的效果是，对于不同的屏幕，在
转载
2020-05-14 10:34:00
380阅读
2评论
移动端高清、多屏适配方案背景开发移动端H5页面
转载
2022-03-29 13:43:28
295阅读
移动端高清、多屏适配方案背景开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机视觉稿在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：首先，选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480，现在更多的是iphone6的375×667)。 对于reti...
转载
2021-06-30 14:28:40
149阅读
一、背景 现在市场上移动设备的屏幕尺寸、分辨率、屏幕密度等因素各式各样，尽可能做到所有设备都自适应，只用一套样式布局来适配所有设备。二、适配最终效果在不同分辨率的手机上，页面整体布局自适应，不会出现页面的情况；在不同分辨率的手机上，字体、宽高、间距、图片大小能够和高保真近视一致。三、移动端相关的知识点3.1 关于设备屏幕的像素：物理设备的显示屏最小组成单位，又称物理像素，
为什么移动端要适配: 由于移动设备的尺寸不一，所以移动端的页面要能够适应不同尺寸的设备，即页面的自适应，让页面在视觉上保持一致。 rem:rem 是css3的一种相对单位，参考是根元素HMTL的font-size的值，即html的font-size:10px;那么 1rem = 10px; 先看下面 ...
转载
2021-09-23 10:50:00
1580阅读
2评论
自从苹果推出了惊艳的iPhone X，智能手机界就正式步入了全面屏的新纪元。然而，这一革新也带来了一个特别的问题——那就是屏幕顶部的“刘海”和底部的“黑条”区域。这些区域给开发者带来了新的挑战！
