设备显示像素
CSS
css style @media
额外的小设备（手机，小于 768px） 小型设备（平板电脑，768px 起） 中型设备（台式电脑，992px 起） 大型设备（大台式电脑，1200px 起）
PC端 屏幕分类列表
PC 常见的几个宽度: 1024 1280 1366 1440 1680 1920
| 分辨率 | 比例 | 设备尺寸 |
|---|---|---|
| 1024 * 500 | – | 8.9吋 |
| 1024*768 | 4:3 | 10.4寸、12.1寸、14.1寸、15寸 |
| 1280*800 | 16:9 | 15.4寸 |
| 1280*1024 | 5：4 | 14.1寸、15.0寸 |
| 1280*854 | 15：10 | 15.2 |
| 1366*768 | 16：9 | 不常见 |
| 1440*900 | 16：10 | 17寸 仅苹果用 |
| 1440*1050 | 5：4 | 14.1寸、15.0 |
| 1600*1024 | 4：3 | 15、16.1 |
| 1680*1050 | 16：10 | 15.4寸、20.0寸 |
| 1920*1200 | 16：10 | 15.4寸、20.0寸 |
| 1920*1200 | – | 23寸 |
移动设备
@media + rem , html head 添加meta 标签
屏幕宽度大于375px的会按照宽度375px来适配。设计平时给我们的设计稿一般是640px宽度或者750px宽度的，上面的都是假定设计稿是640px宽来计算的，750px也是同理计算。
- 屏幕宽度是375，设计稿宽度是640，ratio = 375/640=0.5859375;
- 我们要将设计稿上元素用css单位rem写下来,设定1rem = 100px ;可以设定其它值吗，可以，设置为100是方便我们在写css的时候好计算，小数点直接左移两位就可以了。比如，设计稿上一个宽46px按钮，这样转换成rem直接就是0.46rem
- 1rem代表设计稿上100px,要用到前面的屏幕宽度和设计稿的宽度比 ratio,设计稿上100px代表了真实的设备 100*ratio = 58.59375px
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">
@media screen and (min-width:350px){
html{font-size:342%;}
}
@media screen and (min-width:360px){
html{font-size:351.56%;}
}
@media screen and (min-width:375px){
html{font-size:366.2%;}
}
@media screen and (min-width:384px){
html{font-size:375%;}
}
@media screen and (min-width:390px){
html{font-size:380.85%;}
}
@media screen and (min-width:393px){ /* 小米NOTE */
html{font-size:383.79%;}
}
@media screen and (min-width:410px){
html{font-size:400%;}
}
@media screen and (min-width:432px){ /* 魅族3 */
html{font-size:421.875%;}
}
@media screen and (min-width:480px){
html{font-size:469%;}
}
@media screen and (min-width:540px){
html{font-size:527.34%;}
}
@media screen and (min-width:640px){
html{font-size: 625%;}
}
@media screen and (width:720px){
html{font-size: 703.125%;}
}
vw,vh进行适配
vw：viewport width(可视窗口宽度) 1vw等于1%的设备宽度(设计稿宽度)
vh：viewport height(可视窗口高度) 1vh等于1%的设备高度(设计稿高度)
/*窗口设计稿宽200px，高220px*/
@function px2vw($px, $base: 200) {
@return ($px/($base/100)) + vw;
}
@function px2vh($px, $base: 220) {
@return ($px/($base/100)) + vh;
}
/*头像宽42px,高42px*/
.avantar{
width:px2vw(42);
heightx:px2vh(42);
}
常用Responsitive Styles
@media VS @media screen : @media screen的css在打印设备里是无效的，而@media在打印设备里是有效的
width/height ：定义输出设备中的 页面可见区域宽度/高度
device-width/height ：定义输出设备的屏幕可见宽/高度
resolution ：定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
aspect-ratio ：定义输出设备中的页面可见区域宽度与高度的比率
一种方法是直接在link中判断设备的尺寸，然后引用不同的css文件
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
另一种方法是直接写在 style 标签里
@media mediatype and|not|only (media feature) {
CSS-Code;
}
