CSS布局相关知识点（六）：移动端适配

最新推荐文章于 2024-07-09 18:01:50 发布
最新推荐文章于 2024-07-09 18:01:50 发布
阅读量1.3k 收藏 1
点赞数
文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mateseq/article/details/127480268
版权
本文介绍了CSS布局在移动端的重要性，包括物理像素与CSS像素的区别，视口的概念及其在不同设备上的表现，以及如何通过设置完美视口实现移动端适配。此外，还探讨了vw、px、em、rem等布局单位的使用场景，强调了vw在响应式设计中的优势。
摘要由CSDN通过智能技术生成

物理像素 vs CSS像素

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

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

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

  • 物理像素，上述所说的小点点就属于物理像素
  • CSS像素，编写网页时，我们所用像素px都是css像素

浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈現
一个css像素最终由几个物理像素显示，由浏览器决定：
默认情况下在pc端，一个css像素=一个物理像素

视口（viewport）

视口就是屏幕中用来显示网页的区域
可以通过查看视口的大小，来观察CSS像素和物理像素的比值

默认情况下：
视口宽度 1920px（CSS像素）——1920px（物理像素）
此时，css像素和物理像素的比是1:1

放大两倍的情况：
视口宽度 960px（CSS像素）——1920px（物理像素）
此时，css像素和物理像素的比是1:2

我们可以通过改变视口的大小，来改变Css像素和物理像素的比值

为什么要设计移动端布局、完美视口

在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰，智能手机的像素点实际大小远远小于计算机的像素点，所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，为了解决这个问题，大部分网站都会专门为移动端设计网页

最低0.47元/天 解锁文章
iivvv
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端页面像素值的适配问题的几种处理方式
weixin_44932605的博客
11-15 582
移动端页面像素值适配问题的几种处理方式 移动端机型巨多，各种屏幕分辨率，眼花缭乱！作为前端开发，样式的适配性也显得非常重要！那么。今天，就说说我在之前h5开发过程中，对于像素值的适配问题的几种解决方法 ...
移动端分辨率适配rem
LL200210的博客
03-03 157
引入 1.下载：npm i lib-flexible -S 2.// main.js中 import 'lib-flexible/flexible' 查看是否引入成功： 运行项目时，打开样式，html中有style 此时要求设置长度单位时必须用rem，太过于麻烦,引入postcss-pxtorem解决 1. npm i postcss-pxtorem -D 2.配置文件，新建.postcssrc.js配置文件 ...
前端如何让网页页面完美适配不同大小和分辨率屏幕
最新发布
rolling_kitten的博客
07-09 2983
安装postcss，项目根目录新建配置文件postcss.config.js，记得别用exclude排除node_modules，否则postcss无法将包里的px样式也一起转为vw；对于el-message组件，单独在项目的index.html文件的style里，设置 .el-message { font-size: 16px;推荐使用postcss插件，它会自动将项目所有的px单位统一转换为vw（包括npm安装的第三方组件），从而实现适配
移动端高清屏适配方案
weixin_30600503的博客
02-09 105
结论： 用户体验要求很高的页面，如UV较高的页面，活动页这些应该以用户体验优先，应用flexiable方案 在其它页面，固定视口，不缩放，使用rem做布局适配，js添加屏幕标识以便调整字体大小（即布局使用rem，字体使用百分比），使用@2x图片，只做ios8+的1px处理 面临的问题： 在不同大小和高清的屏幕下： 如何保证 界面布局 一致性：不错乱，不变形 如何保...
前端---【移动端开发的屏幕适配】
m0_61307468的博客
07-14 2384
dpr = 物理像素 / 设备独立像素,适配场景：实际开发中上线后的移动端项目需要在不同的手机上供用户使用访问，不同的手机屏幕尺寸大小不一样。关键点：等比。pc端视口的默认宽度和浏览器窗口的宽度一致；在 css 标准文档中，视口也被称为：初始包含块； 它是所有 css 百分比宽度推算的根源；方法：拿到设计稿之后，设置布局视口宽度为设计稿宽度，然后直接按照设计稿给宽高进行布局即可。 优点：不用复杂的计算，直接使用图稿上标注的px值 缺点： 有些不希望被适配的东西，例如边框，也被适配了，导致比设计稿大的设
移动端适配
记录学习前端的历程
05-22 405
移动端适配rem、vw
css移动端适配最佳实践
发果叁
01-03 535
可以动态设置meta的的缩放比，主要是根据设备宽度与目标设计稿形成像素比scale，假设设计稿是750的，那么我们的就是375,设计稿量的尺寸就是10px,网页上所写的元素也是10px,因为scale=1,随着不同分辨率scale的值也会发生变化* rem适配，浏览器默认，当我们根时，我们利用rem单位设置元素单位，1rem=10px,所以当设计稿750像素时，量尺寸20px,那么你实际单位换成rem时，就是2rem,原有尺寸缩小10倍即可，这种方案会有一定误差，但也基本满足移动端自适应*
移动端布局 flex布局 移动端适配 响应式布局 BootStrap
qq_43206800的博客
09-20 1411
移动端布局 viewport（视口） 视口：PC端的页面直接放入手机屏显示，不友好。内容原因没有设置viewport； 视口：浏览器（PC、移动端）显示页面内容的屏幕区域；不同的屏幕的大小，我们看到的区域也是不同的；viewport就是为了解决上面问题； 语法 默认：HTML980px； 理想：手机屏幕多大，HTML就设置是多大； meta标签设置： <meta name="viewport" content="width=device-width, user-scalable=no, initia
移动端适配详细操作教程.pdf
02-06
本教程将详细讲解移动端适配的相关知识，包括屏幕尺寸、分辨率、像素、PPI和DPI，以及设备独立像素（DIP）的概念。 首先，我们需要了解移动端设备的物理尺寸，通常以英寸为单位来描述屏幕对角线的长度。英寸与厘米...
移动端适配知识点梳理-part one
weixin_39963132的博客
09-09 433
文章目录1. 设备像素和css像素2. pc端的尺寸3. 移动设备中的尺寸4. 理想视口4.1 meta标签4.2 理想视口的概念4.2.1 详解initial-scale4.2.2指令冲突 1. 设备像素和css像素 设备像素，又叫物理像素（physical pixel），给出您正在使用的任何设备的形式分辨率，可通过screen.width/height获取. css像素，又叫设备独立像素（device-indenpendent pixel），此为逻辑像素，计算机设备中的一个点 注意：设备像素
Android 屏幕适配方案
weixin_34087301的博客
04-27 335
前言 本文为自身的总结与结合其他文章引用而成，分别为： wangwangli6：Android开发：最全面、最易懂的Android屏幕适配解决方案 jiashuai94：安卓屏幕完美适配方案——独家秘笈 司小三石：android 屏幕适配的总结，适合面试 宇宝守护神：ImageView的scaleType的属性理解 秦子帅：Android刘海屏适配方案 （暂未总结刘海屏适配，如...
移动端适配(学习笔记)
qq_45519787的博客
04-14 628
从基础概念（dpr，逻辑像素，css像素，设备独立像素，物理像素，逻辑分辨率，物理分辨率，二倍图，视口，meta标签等）到移动端适配方案
【DAY46】移动端适配
qq_42775808的博客
04-30 1013
综上所述，移动端应用程序的发展方向，需要结合多种技术和工具，考虑到用户需求和服务提供的价值，还要考虑到开发人员的效率和程序稳健性。在手机设备上显示的文本大小相对于桌面设备要小得多，因此应当特别注意文字大小和排列方式，保证在不丧失可读性的情况下进行一定的压缩，同时还要注意不要使用过多的字体，以避免速度变慢或者产生不必要的内存占用。例如，在金融应用中，推荐理财产品和服务需基于每个用户的投资习惯和风险偏好。例如，在视频应用中，采用云端视频编码服务，可以提高视频上传和处理的速度，降低移动设备的性能要求。
关于前端代码移动端的适配方案
qingwan_91的博客
06-01 2011
前端代码在移动端的适配方案
浏览器多分辨率适配方法总结（跨平台）
ZDM_9999的博客
04-09 1225
为了兼容IE9以下版本浏览器需要加入一个google的JS，当然可以下载引人html。@media样式进行判断，判断不同分辨率浏览器（显示屏幕）显示不同宽度布局。在css里使用如下标识符可以被ie识别而采用，其他浏览器会忽略if ie。兼容各大浏览器的完整示例。
PC端页面适应不同的分辨率的方法
weixin_49628108的博客
01-25 379
PC端页面适应不同的分辨率的方法
css 常用屏幕分辨率
凉兮的博客
08-24 1763
css 常用屏幕分辨率 @media (min-width: 1024px){ } /*>=1024的设备*/ @media (min-width: 1100px) { } /*>=1024的设备*/ @media (min-width: 1280px) { } @media (min-width: 1366px) { } @media (min-width: 1440px) { } @media (min-width: 1680px) { } @m
html如何自动适应分辨率,css如何适应不同分辨率？
weixin_31884143的博客
05-31 3570
如今的屏幕分辨率，小至320px(iPhone)，大到2560px甚至更高(大显示器)，变化范围极大。我们该如何使用css实现适应不同分辨率呢？下面我们来看一下css适应不同分辨率的方法。纯CSS实现PC浏览器(显示屏幕)或移动端浏览器宽度样式的自适应。将用到@media样式进行判断。一般我们设计网页的时候PC端宽度都在900-1400像素之间，移动端宽度在320-640像素之间，用@media样...
移动端适配详解：CSS像素与设备像素的关系
本文档主要探讨了移动端适配的原理，特别是关于CSS像素(PX)的概念及其在不同设备上的表现。 在移动设备开发中，适配是一个关键问题，因为各种设备的屏幕尺寸、分辨率和像素密度各不相同。适配的目标是确保网页或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值