css3 媒体查询常用适配
@media (max-width:1300px) {}
@media (max-width:1080px) {}
@media (max-width:799px) {}
@media (max-width:720px) {}
@media (max-width:460px) {}
@media (max-height:750px) {}
@media (max-height:310px) {}
@media (max-height:260px) {}
@media (min-width:1921px),(min-height:1201px) {}
@media (max-width:1280px) and (max-height:800px) {}
@media (max-width:960px) and (max-height:600px) {}
@media (max-width:800px),(max-height:480px) {}
/*orientation:landscape 宽度大于高度*/
@media
(orientation:landscape) and (max-height:480px),(orientation:portrait) and (max-width:699px) {}
@media (orientation:landscape) and (max-height:300px) {}
@media (orientation:landscape) and (max-height:650px) {}
@media (orientation:landscape) and (max-height:650px) and (max-width:660px) {}
@media (orientation:landscape) and (max-height:650px) and (max-width:540px) {}
@media
(orientation:landscape) and (max-height:650px) and (max-width:460px),(orientation:landscape) and (max-height:300px),(orientation:portrait) and (max-height:380px) {}
手机端
/* 小于400 */
@media screen and (max-width:300px) {
html,body {
font-size:0.58rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:301px) and (max-width:350px) {
html,body {
font-size:0.6rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:351px) and (max-width:420px) {
html,body {
font-size:0.7rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:421px) and (max-width:490px) {
html,body {
font-size:0.9rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:491px) and (max-width:620px) {
html,body {
font-size:1rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:621px) and (max-width:720px) {
html,body {
font-size:1.2rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:721px) and (max-width:820px) {
html,body {
font-size:1.4rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:821px) and (max-width:920px) {
html,body {
font-size:1.6rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:921px) and (max-width:1020px) {
html,body {
font-size:1.8rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:1021px) and (max-width:1120px) {
html,body {
font-size:2rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:1121px) and (max-width:1220px) {
html,body {
font-size:2.2rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:1221px) and (max-width:1320px) {
html,body {
font-size:2.4rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:1321px) and (max-width:1420px) {
html,body {
font-size:2.6rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:1421px) and (max-width:1520px) {
html,body {
font-size:2.8rem;
}
}/* 大于960 小于1200 */
@media screen and (min-width:1521px) and (max-width:1620px) {
html,body {
font-size:3rem;
}
}
最新文章
- CSS基础(六):浮动深入
- Java继承中属性、方法和对象的关系
- BZOJ4230: 倒计时
- Delphi中如何将 Exe 程序或其他资料打包在内,使用时再释放使用(转)
- WPF 中的字号问题
- 练习题之CyclicBarrier与CountDownLatch
- python 脚本
- AssetBundle.CreateFromFile的有趣事情
- C++ 在字符串中插入子串+推断字符串是否由空格组成
- ROC与AUC
- ansible编译httpd playbook示例
- python_14 静态属性、类方法、静态方法;组合;继承
- js全选 反选
- mysql日期和字符相互转换
- SQL语句增加列、修改列类型、修改列、删除列
- 使用innodb_force_recovery解决MySQL崩溃无法重启问题
- 品味性能之道<;一>;:性能测试思维与误区
- 字符的二进制,php的pack与unpack
- 第十次作业psp
- 平铺式窗口管理器 Musca 初体验