环境
- Chrome
- TailwindCSS
3
Demo
用Vue.js实装,改变屏幕尺寸就能得到当前屏幕信息,建议使用CodePen查看
Code
Vue.js
{{ width }} x {{ height }}
base/xs =
~639px
- iphone se ↑
- iphone 7 ↑
- iphone 12 pro ↑
sm(min-width:640px) =
640px~767px
- iphone se ←
- iphone 7 ←
md(min-width:768px) =
768px~1023px
- ipad mini ↑
- ipad ↑
lg(min-width:1024px) =
1024px~1279px
- ipad mini ←
- ipad ←
- ipad pro ↑
xl(min-width:1280px) =
1280px~1535px
- ipad pro ←
- laptop 1366x768 ↑
2xl(min-width:1536px) =
1536px~
- laptop ↑
- desktop ↑