4.15移动端媒体查询及vw rem

移动端：
设备范围：

默认样式注意:款认样式要写在最前面

/*打印样式*/

@media print {}

*于机等小屏幕于持设备*/

@media screen and (min-width: 320px) and (max-width: 480px) { )

/* 平板之类的宽度1024 以卜设备*/

@media only screen and (min-width: 321px) and (max -width: 1024px) {

/* PC客户端或大屏恭设备: 1028px 至更大*/

@media only screen and (min-wldth: 1029px) {}

/*竖屏*/

@media screen and (orientation:portrait) {对应样式}/*横屏*/

@media screen and (orientation: landscape){对应样式}

媒体查询:设备类型、监测设备特性衣达式构成。语法:

@media设备类型[all\screen] and ( 条件衣达式){css样式}

注: and两 侧必须有空格

not放在设备类型的前面(反向选择[排除某个范围])

媒体查询:做样式微小调整例如:浮动显示隐藏文本大小宽高

Retina屏 ：高清显示屏

ppi:每英小所显示像索点的密度(ppi值越高屏幕显示越清晰)dpi:每英寸所显示像素点的个数

dpr:设备像素比例。

dpr ==物理像索(把手机上图片截图放在ps中量取的大小) /逻辑像素(css中进行设置）
dpr怎么获取:

根据UI设计图而定:绝大部分拿到的设计图的大小750px/ 640px/

针对性对dpr进行获取:

如果设计图为640px或者750px 选取dpr 2

如果设计图为大丁750px选取dpr为3

rem：

rem相对大小:相对 于html的font -size的值而定默认1rem == 16px;

rem布局(等比缩放)

计算流程:

假如:设计图为750px

考虑dpr为2

ps中量出”个元素为88px

设置css大小的时候88px / dpr2 == 44px;

又因为不能固定44px ( 44px固定 之后就不能放人或者是缩小)所有44px转成rem

因为htm1中font-size: 100px;1rem =100px;

44px == 0. 44rem

VW：

vh vmin：视口的宽和高进行比较谁小我用谁 vmax：视口的宽和高进行比较谁大我用谁

视口的宽的比例100VW ==视口宽度的100%

视口高度的比例100vh==视口高度的100%

向題?

vw rem没圄px三神夭系怎幺換算?

已知満屏寛度カ100vw,默人1rem = 16px; (不好竍算 )

カ了方便汁算，假没1rem = 100px, 如果没汁圏是750px( iphone6,7,8),那幺根元素htm1的font-size大小カ多少?

因カ要笑現萸面的比例カ1:1的效果，所以比例如下:

屏幕寛:没汁圏大小= E 元ナ: 假没的比値

100vw : 750px = ? : 100px

100vw/750px = ?/ 100px

750px * ? = 100vw * 100px

根据公式求得

? = (100VW * 100px)/ 750px

最終求得

? = 100vw/7.5

记住:

如果设计图为640px html的font - size值为31. 25VW;如果设计图为750pxhtm1的font - size值为26.67Vw;