通过媒体查询,针对不同的设备的尺寸设置断点来改变布局
屏幕 设备 断点 超小屏幕 手机 <768px 小屏幕 平板 >=768px ~ <992px 中等屏幕 桌面 >=992px ~ <1200px 大屏幕 桌面 >=1200px 常用媒体查询尺寸: 1200px 1100px 1000px 1024px 980px 768px 720px 640px 480px 375px 320px 280px
4、移动设备优先
移动设备优先:超小屏幕 超小型设备(手机,768px以下) 小屏幕 768px-992px @media screen and (min-width:768px) { ... } /* 小型设备(平板电脑,768px 以上) */ 中等屏幕 992px - 1200px @media screen and (min-width:992px){ ... }/* 中型设备(台式电脑,992px 以上) */ 大屏幕 大于1200px @media screen and (min-width:1200px){ ... }/* 大型设备(大台式电脑,1200px 以上) */
案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*在移动端看 移动端显示的颜色 768px屏幕以下*/ body { background-color: orange; } /* 小屏幕 768px-992px 屏幕宽度在768px以上显示的颜色*/ @media screen and (min-width: 768px) { body { background-color: yellow; } } /* 中等屏幕 992px - 1200px*/ @media screen and (min-width: 992px) { body { background-color: tomato; } } /* 大屏幕 大于1200px*/ @media screen and (min-width: 1200px) { body { background-color: pink; } } </style> </head> <body> </body> </html>
5、大屏幕设备优先
大屏幕设备优先:大屏幕 桌面在1200px以上 大型设备(大台式电脑,1200px 以上) 中等屏幕 992px-1200px @media screen and (max-width:1200px) { ... } /* 中型设备(台式电脑,1200px 以下) */ 小屏幕 768px-992px @media screen and (max-width:992px){ ... }/* 小型设备(平板电脑,992px 以下) */ 超小屏幕 768px屏幕以下 @media screen and (max-width:768px){ ... }/* 超小型设备(手机,768px 以下) */ 或者 @media screen and (max-width:768px){ ... }/* 超小型设备(手机,767px 以下) */ /* 注意:此时超小屏幕和小屏幕在768px之间有冲突,怎么解决? 把超小屏幕的区间降低1px*/
案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 屏幕大于1200px显示的颜色 */ body { background-color: green; } /* 中等屏幕 992px-1200px 屏幕宽度在1200px以下显示的颜色*/ @media screen and (max-width:1200px) { body { background-color: tomato; } } /* 小屏幕 768px-992px*/ @media screen and (max-width:992px) { body { background-color: pink; } } /* 注意:此时超小屏幕和小屏幕在768px之间有冲突,怎么解决? 把超小屏幕的区间降低1px*/ /* 超小屏幕 768px屏幕以下*/ @media screen and (max-width:767px) { body { background-color: orange; } } </style> </head> <body> </body> </html>
###