移动端适配

最新推荐文章于 2024-08-17 00:41:11 发布
最新推荐文章于 2024-08-17 00:41:11 发布
阅读量135 收藏
点赞数
分类专栏： 学习簿 文章标签： css3 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36146167/article/details/113189293
版权
本文介绍了前端开发中的移动端适配问题，探讨了物理像素与CSS像素的区别，以及视口在不同设备上的表现。重点讲解了移动端视口的概念，如何通过vw单位进行适配，并建议在开发移动端页面时设置合理像素比，以实现更好的用户体验。
摘要由CSDN通过智能技术生成

像素

屏幕是由一个一个发光的小点构成，这一个个的小点就是像素

分辨率：1920 x 1080 说的就是屏幕中小点的数量

在前端开发中像素要分成两种情况讨论：CSS像素 和 物理像素

物理像素

上述所说的小点点就属于物理像素

CSS像素

编写网页时，我们所用像素都是CSS像素

浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现

一个css像素最终由几个物理像素显示，由浏览器决定：
默认情况下在pc端，一个css像素 = 一个物理像素

image-20210126131604998

笔记本很大可能的情况是因为设置了缩放，所以看起来不等

image-20210126131429687

image-20210126131639165

视口（viewport）

视口就是屏

最低0.47元/天 解锁文章
Liwker
关注
专栏目录
day12-像素、视口、vw
qq_43361287的博客
11-07 389
像素、视口、vw像素像素手机像素视口视口完美视口vwvw单位vw适配 像素 像素 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素； 分辨率说的就是屏幕中小点的数量； 在前端开发中像素要分成两种情况讨论：CSS像素、物理像素； 物理像素： 上述所说的小点就是物理像素； CSS像素： 编写网页时，我们所用的像素就是CSS像素； -浏览器在显示网页时，需要将CSS像素转换为物理像素然后呈现； -一个CSS像素最终由几个物理像素显示由浏览器决定； 默认情况下在PC端，一个CSS像素=一个物理像素； 手机像
移动端适配的理解和各种方案解析(详解)
weixin_57677300的博客
02-24 8853
自适应：根据不同的设备屏幕大小来自动调整尺寸，大小。响应式：会随着屏幕的实时变动而自动调整，是一种自适应。
带你认识什么是移动端适配，及常见的几种方案（em，rem，vw，vh，...）
最新发布
qq_73220073的博客
08-17 904
原生App开发（iOS、Android、RN、uniapp、Flutter等）.小程序开发（原生小程序、uniapp、Taro等）.Web页面（移动端的Web页面，可以使用浏览器或者webview浏览）：根据不同的设备屏幕大小来自动调整尺寸、大小：会随着屏幕的实时变动而自动调整，是一种自适应。
移动端适配详解 , 给你解决适配烦恼
玄鱼殇
05-20 1万+
开发页面到移动端，适配各个手机型号
移动端适配方案
syt_1013的博客
11-03 3719
移动端适配
移动端适配方案有哪几种？
weixin_49429586的博客
09-28 1万+
什么是移动端适配？什么是rem适配？什么是响应式？移动端适配是指同一个页面可以在不同的移动端设备上都有合理的布局。
vue3移动端适配的解决方案（老方案）
12-01
Vue3 移动端适配解决方案是针对现代前端框架 Vue3 的一项技术实践，旨在确保在不同设备和屏幕尺寸上提供良好的用户体验。Vue3 提供了更强大的功能和更高的性能，但移动端适配是一个挑战，因为移动设备的屏幕尺寸、...
手淘解决移动端适配问题（flexible）
09-27
在移动互联网快速发展的今天，移动端适配已经成为网页设计和开发中的关键问题。"手淘解决移动端适配问题（flexible）"的方案是阿里巴巴手淘团队提出的一种高效、灵活的移动端适配策略，旨在帮助开发者解决不同设备...
移动端适配详细操作教程.pdf
02-06
本教程将详细讲解移动端适配的相关知识，包括屏幕尺寸、分辨率、像素、PPI和DPI，以及设备独立像素（DIP）的概念。 首先，我们需要了解移动端设备的物理尺寸，通常以英寸为单位来描述屏幕对角线的长度。英寸与厘米...
详解基于Vue/React项目的移动端适配方案
10-16
随着智能手机的普及，移动端适配已经成为前端开发工作中的重要组成部分。移动设备拥有多种屏幕尺寸和分辨率，为了保证网页在不同设备上能够有良好的显示效果，开发者需要采用相应的适配方案。在前端技术栈中，Vue和...
H5移动端适配 Flexible方案
09-01
《H5移动端适配Flexible方案详解》 在移动互联网时代，H5页面的适配问题显得尤为重要，尤其在各种屏幕尺寸、分辨率各异的设备中，如何确保页面在不同设备上呈现一致的效果，这就是Flexible方案的核心所在。本文将...
移动端适配.md
06-22
移动端适配.md
vue 移动端适配方案详解
10-17
本文将详细介绍两种常见的Vue移动端适配策略：rem布局和lib-flexible插件实现。 一、rem布局 rem（root em）是相对于根元素（通常是html元素）的字体大小单位。通过调整html元素的字体大小，我们可以实现页面元素...
移动端适配flexible.js.docx
11-24
移动端适配flexible.js.docx flexible.js 是一个移动端适配方案，旨在解决移动端页面的尺寸适配问题。在移动端开发中，页面的尺寸适配是一个非常重要的问题，因为不同的移动设备屏幕尺寸和分辨率都不同，如何让页面...
浅谈移动端适配大法
09-22
移动端适配是前端开发中一个非常重要的技术点，它涉及到如何使网页在不同尺寸的移动设备上都能保持良好的布局和用户体验。随着移动设备的广泛使用，这一技术越来越受到开发者的重视。 首先，移动端适配面对的一个...
面试官：你知道移动端适配吗？
程序员成长指北
02-25 188
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群大家好，我是考拉????。分享一篇移动端适配的多个方案，也可以说说你是怎么做的。正文自适应：根据不同的设备屏幕大小来自动调整尺寸、大小响应式：会随着屏幕的实时变动而自动调整，是一种更强的自适应为什么要做移动端适配？目前市面上移动端屏幕尺寸非常的繁多，很多时候我们希望一个元素在不同的屏幕上显示不同的大小...
移动端适配的几种方案
qq_42445025的博客
10-13 3957
移动端适配的几种方案 viewport即视窗、视口，用于显示网页部分的区域，在PC端视口即是浏览器窗口区域，在移动端，为了让页面展示更多的内容，视窗的宽度默认不为设备的宽度，在移动端视窗有三个概念：布局视窗、视觉视窗、理想视窗。 布局视窗：在浏览器窗口css的布局区域，布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或其他值，一般都比移动端浏览器可视区域大很多，所以就有横向滚动条。 视觉视窗：终端设备
前端解决移动端适配的五种方法
热门推荐
weixin_37632943的博客
07-11 3万+
移动端适配的五种方法 所谓移动端适配，就是WebApp在不同尺寸的屏幕上等比显示 第一种方法：viewport适配 原理：通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度. //获取meta节点 var metaNode = document.querySelector('meta[name=viewport]'); //定义设计稿宽度为375 var des...
H5移动端适配：Flexible方案详解
"本文主要介绍H5移动端适配的Flexible方案，探讨了移动端适配的基本概念，包括视觉稿、物理像素、设备独立像素和设备像素比，并解释了如何利用这些概念进行高清适配和布局处理。" 在H5移动端开发中，适配问题是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值