博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
玩媒体查询,就是这么简单粗暴!
阅读量:5995 次
发布时间:2019-06-20

本文共 2192 字,大约阅读时间需要 7 分钟。

首先来看看Bootstrap当时制定的标准,当然也是Twitter的意思咯:

 @media (max-width: 768px) {     body {         background-color: yellow;     } }

小屏幕(平板,大于等于 768px)

@media (min-width: 768px) {     body {         background-color: pink;     } }

中等屏幕(桌面显示器,大于等于 992px)

@media (min-width: 992px) {     body {         background-color: blue;     } }

大屏幕(大桌面显示器,大于等于 1200px)

@media (min-width: 1200px) {     body {         background-color: green;     } }

放到你的html中试一试!

下面是“严格模式”:

@media (max-width: 768px) {     body {         background-color: yellow;     } }

@media (min-width: 768px) and (max-width:992px) {     body {         background-color: pink;     } }

@media (min-width: 992px) and (max-width:1200px) {     body {         background-color: blue;     } }

@media (min-width: 1200px) {     body {         background-color: green;     } }

移动端的页面写的不少了就想来个模板,简单粗暴的解决问题,用750px的UI设计图,分25份。

@media only screen and (width: 320px) {

    html {
       font-size: 12.8px;
    }
}

@media only screen and (width: 360px) {

    html {
       font-size: 14.4px;
    }
}

@media only screen and (width: 375px) {

    html {
       font-size: 15px;
    }
}

@media only screen and (width: 400px) {

     html {
        font-size: 16px;
    }
}

@media only screen and (width: 412px) {

     html {
         font-size: 16.48px;
   }
}

@media only screen and (width: 414px) {

     html {
        font-size: 16.56px;
   }
}

@media only screen and (width: 568px) {

     html {
        font-size: 22.72px;
   }
}

@media only screen and (min-width: 640px) {

     html {
        font-size: 25.6px;
   }
}

@media only screen and (min-width: 667px) {

     html {
        font-size: 26.68px;
   }
}

@media only screen and (min-width: 732px) {

     html {
       font-size: 29.28px;
  }
}

@media only screen and (width: 768px) {

     html {
       font-size: 30.72px;
  }
}

@media only screen and (width: 1024px) {

    html {
      font-size: 40.96px;
  }
}

//=======直接到ipad,啊哈哈哈,犀利吧================================================================

再来一个更炫酷的,淘宝的flexible,废话不多说,

页面加载来一句:

 OK,现在就是用法,1a=7.5px,10a=1rem //=========更粗暴的写法。。。======================================================================================================================
 
//=========================================================================================================== FastClick 的一句话用法:

$(function() {

FastClick.attach(document.body);
});

 

转载于:https://www.cnblogs.com/bug-master/p/6185671.html

你可能感兴趣的文章
浅述内核中“挂起到空闲”的实现
查看>>
大数据开发套件—数据集成常见问题
查看>>
网络社交媒体的情感认知与计算
查看>>
演讲实录丨余胜泉 大数据时代的教育智能
查看>>
jQuery使用手册(收藏)
查看>>
Linux 有问必答:如何从VirtualBox中从主机访问NAT客户机
查看>>
springcloud(三):服务提供与调用
查看>>
《R语言初学指南》一1.5 本章小结
查看>>
理解Storm的内部消息缓冲机制
查看>>
《OpenCL实战》一1.6 框架和SDK
查看>>
《Java编码指南:编写安全可靠程序的75条建议》—— 指南8:防止XPath注入
查看>>
《设计模式解析(第2版•修订版)》—第2章 2.3节为什么使用UML
查看>>
苏州协鑫与阿里云合作阶段性完成,良品率已提升1%
查看>>
setContentType与setCharacterEncoding的区别
查看>>
马云:高手的竞争论,句句深刻励志!
查看>>
优秀的程序员才不会觉得累成狗是一种荣耀!
查看>>
流计算风云再起 - PostgreSQL携PipelineDB力挺IoT(物联网), 大幅提升性能和开发效率...
查看>>
Google VR技术大揭秘
查看>>
Java初学者必知:Java语言的11大特点
查看>>
07.GitHub实战系列~7.Git之VS2013团队开发(如果不想了解git命令直接学这篇即可)...
查看>>