web移动端基础

移动基础 1-1 移动端介绍

pc端与移动端的不同:

分辨率不同,手机有4.2,4.3,4.7,5.5,5.7,pad9.7等。

手机设备像素对开发的影响:不同分辨率需要兼容,屏幕不同。

css度量单位:pc上主要用px,移动端常用px,rem,vw等。

移动端浏览器分布情况:如何兼容。

 

移动基础 2-1 移动端与PC端的不同(1)

w3c标准的支持情况:caniuse.com查阅浏览器支持标准。

交互上因为屏幕的变化而改变:屏幕变小,很多东西需要触发事件才能展现,最明显的就是菜单栏的变化。

pc与移动端区别: 页面承载量不同, 使用场景不同, 网络接入方式, 交互方式不同, 最主要的是屏幕大小的影响。 

移动基础 2-4 移动端与PC端的不同(2)

布局上能采用更多的方式:

移动端: Flex布局。(最常用一行多列)

display: flex;//弹性元素。

flex: 1;//子元素比例关系

-----------------

pc上,一行多列,常用:

float: left;

position: absolute;

display: table;

Rem计算: rem指的是html的font-size的大小。 1rem=字体大小; 10rem=字体大小*10;

性能上考虑的点不太一样:要考虑弱网络环境(2G,3G,4G,WIFI), 考虑流量问题, 图片适配和压缩问题。

移动端背后的阴影: 浏览器的性能问题,不如pc。 国产友商。 android的版本问题。

移动基础 3-1 手机设备基本概念

-physical pixel:物理像素值,屏幕尺寸和分辨率

-device-independent pixel:设备独立像素:和设备无关的像素值,如px。浏览器本身的默认的宽高。

-device pixel ratio:设备像素比。 当前浏览器宽度*设备像素比=屏幕像素值。

PPI(pixels per inch)每英寸的像素值。(屏幕的像素密度)当设备的ppi大于300,就说明是高清屏。retina屏。

retina:一种新型高分辨率的显示技术。

PPI=((物理像素宽*物理像素宽+物理像素高*物理像素高)的开根号)/英寸。

 

移动基础 3-5 viewport

viewport:移动设备上的viewport是指设备的屏幕上能用来显示网页的区域,一般来讲,移动设备上的niewport都要大于浏览器的可视区域。

语法:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scaleble=no">

属性:width:设置layout viewport的宽度,值为一个正整数,或字符串“device-width”常用device-width。

height:设置layout viewport的高度,这个属性对我们并不重要,很少使用。

initial-scale:设置页面的初始缩放值,为一个数字,可以带小数。

minimum-scale:设置页面的最小缩放值,为一个数字可以带小数。

maximum-scale:设置页面的最大缩放值,为一个数字,可以带小数。

user-scalable:是否允许用户进行缩放,值为“no”或“yes”。

 

移动基础 3-8 css度量单位

css度量单位:像素值px(pixel)

rem:根据html元素的字体大小作为单位。不受父元素影响。

em:根据父元素的字体大小作为单位,也就是继承父元素的字体大小。

viewport被均分为100单位的vh和vw。 100vh为视口的总高,100vw为视口的总宽。

vmax在高宽中取大值的百分之一。 vmin在高宽中取小值的百分之一。

这么多单位都是为了兼容不同分辨率。

 

 

移动基础 3-12 浏览器分布情况

 

-在PC端比较需要考虑的浏览器的IE,在做网页前通常需要讨论兼容到IE几,这会影响到技术和CSS属性等等的使用

-移动端 Android、ios -Android和ios的版本迭代快,要考虑到低版本的兼容

国产友商:会对原生的Android浏览器进行改动,删去一些原有的功能,添加一些没有的功能,这样会造成很多困扰

微信:X5内核,用途广泛

腾讯浏览服务查询网址(微信x5内核)

 

 

相关内容推荐