响应式布局媒体查询通用模板

在写响应式布局的时候总是记不住媒体查询的的分割处,这是公司官网和m站的分割,大概记一下,提醒自己,具体使用的时候再修改。

/*官网:*/
@media screen and (max-width:1024px)
{} @media screen and (max-width:960px){} @media screen and (max-width:830px){} @media screen and (max-width:750px){} @media screen and (max-width:640px){} @media screen and (max-width:414px){} @media screen and (max-width:375px){} @media screen and (max-width:320px){} @media all and (orientation:landscape){} @media all and (orientation:portrait){}

M站:
/*
custom*/ html{font-size:32px;} body{font-size:24px;} @media screen and (min-width:320px){ html{ font-size:16px; } body{ font-size:12px; } } @media screen and (min-width:360px){ html{ font-size:18px; } body{ font-size:12px; } } @media screen and (min-width:414px){ html{ font-size:20.7px; } body{ font-size:14px; } } @media screen and (min-width:480px){ html{ font-size:24px; } body{ font-size:18px; } } @media screen and (min-width:640px){ html{ font-size:32px; } body{ font-size:24px; } }

 

posted @ 2016-10-19 09:53  爱吃柚子的笨姑娘  阅读(638)  评论(0编辑  收藏  举报