- 综合排序
- 最热优先
- 最新优先
- 来自专栏超超不会飞
移动端适配
实习期间主要在写微信端H5，遇到的最大问题就是适配各个不同尺寸的屏幕。公司就我自己一个前端，只能自己摸索着来。 方法1：媒体查询 这是最笨工作量最大的方法了，就是一个屏幕尺寸一个屏幕尺寸的适配，当然你没办法适配到所有的手机型号，有的手机比较奇葩，同样是5.5寸，有的矮胖，有的瘦高。 我的方法是以iphone6为准，然后向上适配5.5寸，向下适配4.7的iphone5，这个时候就能自适应市场上的一些主流屏幕，然后在对其他品牌手机挑一部分手动适配。 方法3：神奇的 vh、vw css3新增的单位，相对于视窗的宽度或高度，100vh代表整个可视区域，不包括标题栏状态栏底栏等区域，详细的可以看一下张鑫旭大神的文章 视区相关单位vw, vh..简介以及可实际应用场景 在很早之前找解决方案的时候就看到这篇文章了——使用Flexible实现手淘H5页面的终端适配。
2.7K20发布于 2020-09-18 - 来自专栏十月梦想
移动端适配之viewport适配
前面说过了比例缩放适配,本来想直接介绍rem适配!还是补充一下这个viewport适配吧!其实这个viewport也归属于比例缩放适配的一种吧! 首先我们可以获取到当前设备的独立像素(window.screen.width),然后通过适配的像素比(dpr)还原其真实逻辑像素(物理像素),然后在其还原后的设备像素上进行适配. 那么这个viewport适配有什么问题呢? 320/scalc=640 * 414/scalc=1242 * 缩放比例 scalc= 1/2 * 缩放比例 scalc= 1/2 * 缩放比例 scalc= 1/3 (比例缩放时候讲过),尽管这样,也算尽量尽可能的去适配!随后继续介绍较为完美的rem布局适配方案!淘宝的布局方案,也算此种方式!不过适配的是dpr2.0的!
1.3K10发布于 2018-08-29 - 来自专栏前端开发随笔
Vue3+vant4适配移动端
/assets/style/vant-theme.css' 移动端适配 npm install postcss-px-to-viewport vite.config.js import { defineConfig
2.7K30编辑于 2023-01-03 - 来自专栏生如夏花绚烂
探讨移动端适配
在探讨移动端适配前我们先要了解下面几个概念 像素 分辨率 物理像素 CSS像素 像素 像素（Pel，pixel;pictureelement），为组成一幅图像的全部亮度和色度的最小图像单元。 所以，有如下公式： DPR = 设备像素/CSS像素 了解上面的东西后接下来我们来探讨移动端的适配问题 注意在不同的屏幕，单位像素的大小是不同的，像素越小屏幕越清晰，智能手机的像素点是远远小于显示器的像素点的 这就是pc端网页没有做移动端适配的情况下，在移动端看上去会非常的小，我们要通过缩放才能正常浏览网页，当然这个体验并不是很好 这也就是我们常说的布局视口 完美视口（理想视口） 默认情况下 移动端的像素比为 980/移动端宽度 布局视口带来的问题是 如果我们直接在网页中编写移动端代码，在980的视口下像素比是非常不友好的 也就是 1px =0.几物理像素，这样就会导致网页中的内容非常非常小 因此在编写移动端页面时 ，必须要确保有一个比较合理的像素比 如 1CSS像素对应2/3个物理像素 问题是我们如何去调整移动端的像素比？
2.2K10编辑于 2022-09-08 - 来自专栏IMWeb前端团队
移动端适配大法
一波还未平息，一波又来侵袭~移动端确实不用考虑IE了，各种CSS新特性也用的爽到飞起，但一座大山压了过来，那就是分辨率的适配，移动端由于展示区域比较小，因此对于页面在不同分辨率手机上的展示细节也要求更加严格 ，这时像PC端有些固定宽高的布局方式显然不适应，我们被要求对于不同大小手机页面能自适应，真是非常有（tong）趣（ku）呢~ 话不多说，下面就总结了一些移动端常用的适配手法： 一、百分比 使用场景：只要求宽度随屏幕自适应 ，比如文字块 百分比在PC端自适应上也经常用到，着实相当好用，但它一般用于宽度自适应的设置，高度设置百分比时，要求其父类元素有明确高度。 三、媒体查询 使用场景：一般利用媒体查询来进行特殊处理，比如 1、iphoneX这类全屏的适配 2、在适配dpr为3的iPhone Plus或者pad横屏等超级大屏时，需要根据业务需求设置临界值，然后展示不同内容或者替换不同分辨率图片 （也就是常说的2倍图、3倍图的使用）等 四、vw、vh vw是以屏幕宽度为基准的百分比单位，1vw=1%* deviceWidth vh是以屏幕高度为基准的百分比单位，1v=1% * deviceHeight
3.2K20发布于 2019-12-03 - 来自专栏十月梦想
移动端适配之比例缩放适配
前面一篇简单介绍了适配的方案(百分比适配),对于百分比的适配也是挺多问题,这次介绍一下viewport适配方案! 适配的思想呢? 就是比如ip6的设备独立像素(375px),这个设备独立像素介绍移动端时候说过可以使用缩放进行改变! 此时我们可以将所有的设备的独立设备像素转为375px(ip6的),然后进行渲染适配,在375px上就行布局! 那么这个比例缩放适配存在什么问题呢? 但是750px的图像等,在原始独立像素大于414的设备可能出现图像失真等问题,后面会详细介绍一下移动端终极适配方案rem适配 本博客所有文章如无特别注明均为原创。 原文地址《移动端适配之比例缩放适配》 分享到：更多 标签: 移动端适配 比例缩放适配
1.6K30发布于 2018-08-29 - 来自专栏HTML5学堂
pageResponse - 移动端适配框架
HTML5学堂：移动端布局一直都是一个问题，各种各样的分辨率使得移动端的布局需要耗费大量的时间。今天介绍一个框架pageResponse.js可以让页面在各种分辨率手机下都能完全不走样。 通常移动端的布局方式 1、rem布局，通过动态设置根目录下的font-size达到元素大小“自适应”，通常和百分比布局一起使用 2、固定像素设固定视口宽度。 结束语 移动端有很多做法，对于我来说之前提到的三种常用的方法我都用过，而他们经常是结合着用，单独的存在往往不能够满足需求，就拿一个简单的例子来说 main footer 竖屏的时候你希望footer在底部 移动端看似简单，布局上却有非常多的细节问题。因此多学多思考，学如逆水行舟，不进则退。希望大家能多对比多思考，方法总有优缺点，懂得如何互助互补才是关键。 案例和资源 详细案例和js下载，可查看文章——>pageResponse - 让H5适配移动设备全家，小编在书写本文时也查看了这篇文章，感觉还是可以的，也很感谢该作者的分享。
1.3K60发布于 2018-03-12 - 来自专栏centosDai
「移动端」Web页面适配
一、什么是移动端适配 移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。 由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。 二、移动适配方案 常见的移动适配方案有以下几种： viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机端需要照顾 PC 端，如果不设置 viewport，直接访问网页的时候 viewport 设置可视区之后，就会把网页的宽度设置为移动设备的屏幕宽度。 如想深入学习，可查阅《viewport深入理解和使用 - 前端人 - 博客园》。 2.2、盒模型 CSS3 中新增 box-sizing 属性，可以设置盒模型类型。
2K40编辑于 2021-11-30 - 来自专栏centosDai
「移动端」Web页面适配
一、什么是移动端适配 移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。 由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。 二、移动适配方案 常见的移动适配方案有以下几种： viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机端需要照顾 PC 端，如果不设置 viewport，直接访问网页的时候 viewport 设置可视区之后，就会把网页的宽度设置为移动设备的屏幕宽度。 如想深入学习，可查阅《viewport深入理解和使用 - 前端人 - 博客园》。 2.2、盒模型 CSS3 中新增 box-sizing 属性，可以设置盒模型类型。
1.7K40发布于 2021-09-30 - 来自专栏centosDai
「移动端」Web页面适配
一、什么是移动端适配 移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。 由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。 二、移动适配方案 常见的移动适配方案有以下几种： viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机端需要照顾 PC 端，如果不设置 viewport，直接访问网页的时候 viewport 设置可视区之后，就会把网页的宽度设置为移动设备的屏幕宽度。 如想深入学习，可查阅《viewport深入理解和使用 - 前端人 - 博客园》。 2.2、盒模型 CSS3 中新增 box-sizing 属性，可以设置盒模型类型。
2.9K40发布于 2021-10-01 - 来自专栏Dimples开发记
移动端适配vw方案
# 1、前言 设计师交付给前端开发一张宽度为750px的视觉稿，设计稿上元素的尺寸、颜色、位置等已做过标注，要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案。 基于此，我们可以把所有需要适配屏幕大小等比缩放的元素都使用vw做为单位。不需要缩放的元素使用px做单位。 举个例子。 # 3、适配代码 假设设计稿尺寸是750px，页面有一个按钮，按钮文字标注大小28px，按钮高度标注为48px，宽度为120px，边框为1px不缩放。 <! viewport缩放方案 适配原理简单 需要使用JS 直接使用设计稿标注无需换算 方案死板只能实现页面级别整体缩放 动态REM方案 适配原理稍复杂 需要使用JS 设计稿标注的px换算到CSS的rem 计算简单 方案灵活技能实现整体缩放又能实现局部不缩放 vw方案 适配原理简单 不需要JS即可适配 设计稿标注的px换算到CSS的vw计算复杂 方案灵活技能实现整体缩放又能实现局部不缩放
1.4K20编辑于 2022-12-21 - 来自专栏WflynnWeb
移动端适配终极封装
gi.test(win.navigator.appVersion); if (lib.scaleType === 2 && isIPhone || lib.scaleType === 3)
70040编辑于 2022-10-28 - 来自专栏前端之路
移动端适配iPhoneX方案
移动端适配iPhoneX方案 对页面进行iPhoneX适配处理教程 在viewport 中添加 viewport-fit=cover 属性 <meta name="viewport" content=" 一般我们只希望 iPhoneX <em>适配</em>样式，可以配合 @supports 进行css条件判断使用样式： 12345 @supports (bottom: constant(safe-area-inset-bottom margin-bottom: constant(safe-area-inset-bottom); } } ---- 拓展阅读 iPhone X的Web设计 这里总结了大家iOS 11，iPhone X <em>适配</em>问题
1.3K50发布于 2018-07-17 - 来自专栏小鑫の随笔
web移动端适配之rem适配原理
!function(window, document) { function setSize() { // 设备宽度 let deviceWidth = window.screen.width; // 设计稿宽度 const baseValue = 750; // html的字体大小 = (设备宽度 / 设计稿宽度) * 100 document.documentElement.style.fontSiz
1.4K50编辑于 2022-02-25 - 来自专栏十月梦想
移动端适配之终极适配方案rem适配
前面几篇移动端专区博文简单介绍了移动端的概述,以及简单的适配方案,百分比适配,比例缩放适配,viewport适配等,但是难免都有一些各种问题! 这次这个rem终极适配方案,是目前移动端的较为完美的适配方案! 12px 2.如果两个元素的字体规格不一样就是分别就行设置,不方便设置 rem:css3新增的相对单位,相对于根节点(html)字体设置 html{ font-size:12px; } 1rem =12px,5rem=60px; 首先要去设置这个html(根节点的字体大小),rem是根据这个根节点的字体大小进行适配! 当然去适配的时候这个根节点的大小如何设置才能更好适配呢?
2K20发布于 2018-08-29 - 来自专栏老马寒门IT
08-移动端开发教程-移动端适配方案
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 2.1 横向百分比 + 纵向高度固定 首先看案例： 拉勾网移动端首页顶部的logo区域，不管如何变化浏览器的宽度，高度不变化，宽度自适应。 3. rem布局方式 rem是css3中新增加的长度单位，之前我们接触过em单位，em表示1em代表1个字体的宽度。而rem是根元素字体的大小，在网页中也就是设置的html根元素的字体大小。 3.1 媒体查询改变根元素的字体大小 CSS3新增加了媒体查询功能，也就是可以根据设备媒体的属性做相关的判断，然后执行不同的CSS规则。 媒体查询细节参考。 这样优点非常多，首先开发人员直接像素还原，开发效率很高，也没有移动端1像素的问题。也是老马推荐大家使用的方式。
4.2K100发布于 2018-02-18 - 来自专栏Dimples开发记
移动端适配viewport缩放方案
# 1、前言 设计师交付给前端一张宽度为750px的视觉稿，并对设计稿上元素的尺寸、颜色、位置等做了标注，要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案。 之后需要通过JavaScript计算获取屏幕的宽度（假设需要适配逻辑像素宽度是428px的屏幕），在HTML的head里添加<meta name="viewport" content="width=750px # <em>3</em>、<em>适配</em>代码 <! <em>适配</em>范围广。 缺点：页面整体放大缩小，对于不想缩放的元素无法控制。比如边框在大屏手机下显得很粗，在小屏手机下显得很细。
1.8K20编辑于 2022-12-21 - 来自专栏老马寒门IT
08-移动端开发教程-移动端适配方案
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 2.1 横向百分比 + 纵向高度固定 首先看案例： 拉勾网移动端首页顶部的logo区域，不管如何变化浏览器的宽度，高度不变化，宽度自适应。 ? 3. rem布局方式 rem是css3中新增加的长度单位，之前我们接触过em单位，em表示1em代表1个字体的宽度。而rem是根元素字体的大小，在网页中也就是设置的html根元素的字体大小。 3.1 媒体查询改变根元素的字体大小 CSS3新增加了媒体查询功能，也就是可以根据设备媒体的属性做相关的判断，然后执行不同的CSS规则。 媒体查询细节参考。 这样优点非常多，首先开发人员直接像素还原，开发效率很高，也没有移动端1像素的问题。也是老马推荐大家使用的方式。
3.5K60发布于 2018-04-02 - 来自专栏大前端（横向跨端 & 纵向全栈）
Rem在移动端的适配
-- 为移动设备添加 viewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable
76030发布于 2020-11-26 - 来自专栏前端小叙
移动端适配解决方案
优化以前写过的一篇文章：https://www.cnblogs.com/beileixinqing/p/11283315.html 目前常见移动端适配方案 1、媒体查询 通过写媒体查询，在不同的分辨率下写对应不同的样式 3、通过视口单位（ Viewport units ) 在业界，极为推崇的一种理论是 Peter-Paul Koch (江湖人称“PPK大神”)提出的关于视口的解释——在桌面端，视口指的是在桌面端，指的是浏览器的可视区域 ；而在移动端较为复杂，它涉及到三个视口：分别是 Layout Viewport（布局视口）、 Visual Viewport（视觉视口）、Ideal Viewport。 而视口单位中的“视口”，在桌面端，毫无疑问指的就是浏览器的可视区域；但是在移动端，它指的则是三个 Viewport 中的 Layout Viewport 。 ? 兼容性 其兼容性如下图所示，可以知道：在移动端 iOS 8 以上以及 Android 4.4 以上获得支持，并且在微信 x5 内核中也得到完美的全面支持。 ? 截图来自Can I Use ?
1.9K30发布于 2020-09-27
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号