你了解过移动端适配吗?

本文详细介绍了移动端适配的原因、概念和解决方案,包括屏幕尺寸、像素、分辨率、设备像素比和视口等。文章讨论了rem、vw/vh布局以及px为主的适配策略,强调了理解用户需求和选择合适布局方法的重要性。
摘要由CSDN通过智能技术生成

很多人聊起移动端适配都是懵逼状态,都想口吐芬芳。难道移动端还要适配,直接px写死,其他自适应不就完了吗?其实不然,要求严格的公司会要求缩放比例完全相同,简单说就是,在每个手机上的每一行的字数都要一样。接下来,我们就要细说移动端适配的前世今生
1、为什么要移动端适配?
一般情况下设计稿的设计师按照375的尺寸设计,然而,在现在移动终端(就是手机)快速更新的时代,每个品牌的手机都有着不同的物理分辨率,这样就会导致,每台设备的逻辑分辨率也不尽相同,此时357的设计稿,如果想要还原那基本是不可能了,因为如果一个左右布局,左边如果写死,右边自适应的话,每个设备的右边所展示的内容大小就不尽相同,这是移动端适配就显得尤其重要
既然要了解前世今生,我们就从几个概念说起先上一张图

下面我们一个个解析
屏幕尺寸
屏幕尺寸是以屏幕对角线的长度来计量,计量单位为英寸。
如图所示两个对角线的长度就是这个屏幕的尺寸

像素
我们看到上图320x480叫分辨率,而这个所谓的分辨率就是说白了就横向320个像素纵向480个像素组成
什么叫像素呢?
像素(Pel,pixel;pictureelement),为组成一幅图像的全部亮度和色度的最小图像单元。电视的图像是由按一定间隔排列的亮度不同的像点构成的,形成像点的单位也就是像素,组成图像的最小单位就是像素。从计算机技术的角度来解释,像素是硬件和软件所能控制的最小单位。它指显示屏的画面上表示出来的最小单位,不是图画上的最小单位。一幅图像通常包含成千上万个像素,每个像素都有自己的颜色信息,它们紧密地组合在一起。由于人眼的错觉,这些组合在一起的像素被当成一幅完整的图像。当修改图像的某区域,实际上是在修改该区域内的像素。对这些像素修改的好与坏将决定最终图片的质量。单位面积内的像素越多,图像的效果就越好。彩色电视图像是由成千个像素点所组成的,而且每个像素都是由红绿蓝三种颜色并排组成的。(注意每个像素的大小是不固定的,他是根据设备的分辨率决定的,知识点,后面要考)
什么叫分辨率呢?
屏幕分辨率是指纵横向上的像素点数,单位是px。屏幕分辨率确定计算机屏幕上显示多少信息的设置,以水平和垂直像素来衡量。就相同大小的屏幕而言,当屏幕分辨率低时(例如 640 x 480),在屏幕上显示的像素少,单个像素尺寸比较大。屏幕分辨率高时(例如 1600 x 1200),在屏幕上显示的像素多,单个像素尺寸比较小。
知道什么叫做分辨率后,有人就会奇怪,我记得苹果的苹果官网上的苹果6的分辨率为750x1334啊,但是设计稿上苹果6的分辨率为375x667啊

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值