尺寸单位 巴拉巴拉

TAO_Z90835
246 阅读3分钟

px 宽高 媒体查询 想到哪里写哪里

px

px是css常用的长宽单位,是浏览器的像素,与实际的物理像素不同

像素在不同设备的区别

  • 在pc端

    浏览器的像素与实际像素的比例关系是1:1

  • 在移动端

    苹果手机的像素比是2:1 ,也就是说两个真实的物理像素对应一个浏览器像素 安卓手机根据厂商的区别各不相同

放大或缩小
  • 当页面进行放大或缩小操作的时候,并没有改变我们为其设置的css样式中的值width:100px不论怎样进行放大OR缩小,其宽度的100都不改变,改变的是px对应的实际像素;以浏览器为例:当页面放大两倍时,原本1px对应的是一个物理像素,改为1px对应2个物理像素(长宽分别对应两个);

页面宽高

可以通过window.innerHeight/Width和document.documentElement.clientHeight/Width获取

  • window.innerHeight/Width

    获取到的是浏览器不包含工具栏,但包含滚动条的宽高;

    当页面进行缩放的时候除了opera的主流浏览器,都会对px进行放大缩小的改变,获取到的值是当前可以看到的页面,在页面缩放比例为100%的时候,对应的px值,而opera是以实际的像素为准;

    也就是说,虽然浏览器本身的宽高未发生改变,但由于页面进行了缩放,原本window.innerHeight = 1000px,在放大到125%时会获取到window.innerHeight = 800px,即原本的数值/125;

    在移动端,这个值是布局视口的宽高.

  • document.documentElement.clientHeight/Width

    获取到的是不包含滚动条的宽高,其余的与window.innerHeight类似

    在移动端,这个是视觉视口的宽高

  • document.documentElement.offsetHeight/Width//暂时存

    获取的是整个网页真实的大小,包括滚动出去的部分;HTML的尺寸

viewport/视口

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

是针对移动端来说的,当移动端打开网页的时候,浏览器会默认给出一个viewport的width,但是这个值一般比较大,当使用默认值时,相当于在手机这个小小的窗口里看界面,看到的只是手机屏幕透出来的与之相同大小的页面,需要左右滑动以便看到其他位置,或者进行放大缩小的操作.

css是相对于布局视口,而非视觉视口进行排列的;当页面缩小到能看到全部页面时(横向),相当于另上述的三个尺寸变成设备的宽度大小,这样每个css的px,相当于1/n的真实px,页面很难看清;viewport是被设置手动调节布局视口大小.

width=device-width和initial-scale = 1都是可以设置布局视口(layout view)和理想视口等宽的,但因为横屏时前者iphone不支持,后者IE不支持,所以为了兼容性问题,都要写上.

width/device-width

device-width是设备的宽度,当我们在用小屏浏览的时候,看到的浏览器界面,就是实际手机的整个屏幕,可以设置width=device-width;而当我们使用电脑的时候,如果也设置宽度是设备的宽度,会引起不必要的混乱;

媒体查询

根据给定的要求,匹配不同的css文件

<link rel="stylesheet" href="url" media="screen and (max-width:800px)" />

<style>
@media screen and (max-width:800px){
    /*--------------------*/
}
</style>

rem

rem与px不同的是,他不是绝对的,而是相对的,他的大小是相对于html的font-size的(1:1)

avatar
文章
阅读
粉丝