首先来看看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);});