ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

移动端适配方案&移动端基本概念

2021-07-29 10:34:22  阅读:215  来源: 互联网

标签:scale 适配 个数 像素 视口 移动 基本概念 css 物理


移动端适配方案

1. rem适配

rem单位:根标签的font-size所代表的值
---步骤
	第一步  		创建style标签
	第二三步		将根标签的font-size置为布局视口的宽/16
	第四步  		将style标签添加到head中
---原理
	改变一个元素在不同设备上的css像素的个数
---优缺点
	优点:可以使用完美视口
	缺点:px到rem的转化特别麻烦(这已经不是问题了)
(function(){
	var styleNode = document.createElement("style");
	var w = document.documentElement.clientWidth/16;
	styleNode.innerHTML = "html{font-size:"+w+"px!important}";
	document.head.appendChild(styleNode);
})()
/*less + rem */
/* 此时我们的750为设计图大小,具体值应该跟随设计图大小来进行设置 */
/* 对于750/16rem的逻辑为:因为16rem为占据页面的总宽,所以750(设计图的宽度)/16rem得出1rem与设计图的等比 */
/* 这个适合我们就可以根据该元素在设计图的宽度来设计大小啦,例如test的宽高为200px,那么我们就可以这样来写: */
@rem:750/16rem;
#test{
    width: 200/@rem;
    height: 200/@rem;
    background: pink;
    text-align: center;
    line-height: 200/@rem;
   }

2. viewport适配

​将所有设备的布局视口的宽置为设计图的宽度 ​
第一步 定义设计图的宽度 ​
第二步 确定系统缩放比例 ​
第三步 选中viewport标签,改变其content值 ​
原理 ​改变不同设备上一个css像素跟物理像素的比例
​优缺点 ​
优点:所量即所得 ​
缺点:破坏了完美视口

html中加

<meta name="viewport" content="width=device-width"/>

js中加

/*viewport适配的原理:
			viewport适配方案中,每一个元素在不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的,等比的*/
		/*viewport适配的优缺点:
			优点:所量即所得
			缺点:没有使用完美视口*/
		(function(){
			var targetW = 640;  //设计稿的尺寸
			var scale = document.documentElement.clientWidth/targetW;   //缩放比例
			var meta =	document.querySelector("meta[name='viewport']");
			meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
		})()

在css中,量的尺寸是多少就写多少

3. 百分比适配

​百分比参照于谁(简单的小项目可以使用)

4.流体(弹性布局 flex)+固定 (不是适配)


1. 基本概念

屏幕尺寸: 对角线的长度(英寸)
屏幕分辨率: 横纵向上物理像素的个数(物理像素)
屏幕密度: 每英寸上物理像素的个数
视口尺寸: 代表的横纵向上css像素的个数(css像素)

2. 4个像素 3个视口 2个操作 1个比例

4个像素:

物理像素

分辨率,是屏幕呈像的最小单位
设备出厂时,该款设备所包含的物理像素的点数和一个物理像素所占据的实际屏幕尺寸是确定的

css像素

是web开发者使用的最小单位
一个css像素最终一定会转成物理像素去屏幕上呈像
一个css像素到底占据多少个物理像素和谁有关?
(1)屏幕的特性(像素比)
(2)用户的缩放行为
不考虑用户缩放
没有viewport:
这块屏幕横向上占据了多少个css像素 (视觉视口的横向尺寸)
有viewport:
像素比
]一个方向上所占据的物理像素的个数/一个方向上所占据的css像素的个数
考虑用户缩放
在屏幕的特性的基础上:
放大:css像素占据更多的物理像素
缩小:css像素占据更少的物理像素

设备独立像素

是设备对接css像素的接口,一旦css像素与独立像素挂上勾(width=device-width)
此时像素比才能发挥真正的作用

位图像素

图片的最小单位
位图像素与物理像素一比一时,图片才能完美清晰的展示

3个视口

		布局视口
			决定页面的布局
		视觉视口
			决定用户能看到什么
				一个css像素到底占据多少个物理像素和视觉视口有极大的关系
				一个视觉视口的实际尺寸是确定的(屏幕尺寸)
				一个视觉视口包含的物理像素的个数是确定的(分辨率)
				一个视觉视口包含的css像素的个数是不确定的(用户的缩放行为有关)
		理想视口
			设备独立像素所代表的值

2个操作

		用户
			只影响视觉视口
		系统(initial-scale)
			影响布局视口和视觉视口
	
			放大
				放大一个css像素的面积,视觉视口的尺寸变小,一个css像素包含的物理像素的个数变多
			缩小
				缩小一个css像素的面积,视觉视口的尺寸变大,一个css像素包含的物理像素的个数变少

像素比

		官方定义:
			物理像素/设备独立像素
			一个方向上所占据的物理像素的个数/一个方向上所占据的css像素的个数

3. 3个意外

	1.太大的元素
		使用完美视口(有width=device-width和initial-scale=1.0)
		解决太大的元素超过视觉视口后不出滚动条的问题
	2.width和initial-scale的冲突
		谁大听谁的
	3.等比问题
		没有viewport:
			等比,页面展示太小,用户体验不好
		有viewport:
			不等比,每一个css像素在不同设备占据的实际屏幕尺寸一样。
					每一个css像素在不同设备占据的物理像素的个数不一样(像素比)。
					一个物理像素占据的实际屏幕尺寸在不同设备上是不一样的

标签:scale,适配,个数,像素,视口,移动,基本概念,css,物理
来源: https://blog.csdn.net/weixin_44586981/article/details/119204196

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有