您现在的位置是:首页 > 随笔小记 > 大收获

media媒体查询,移动端适配尺寸大全

  • 付博瀚
  • 大收获
  • 2018-08-30
  • 人已阅读
简介media媒体查询,移动端适配尺寸大全,记录分享常用的尺寸大小,有更好的尺寸大小会一直更新
首先需要在head中加入<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> ,不适用浏览器默认的960像素的宽度,预防在屏幕中显示960像素,整体的难看。
然后就是设置屏幕宽度
@media screen and(min-width: 320px)and(max-width: 359px){ 
html{ 
font-size: 12.8px; 


@media screen and(min-width: 360px)and(max-width: 374px){ 
html{ 
font-size: 14.4px; 


@media screen and(min-width: 375px)and(max-width: 385px){ 
html{ 
font-size: 15px; 


@media screen and(min-width: 386px)and(max-width: 392px) { 
html { 
font-size: 15.44px; 


@media screen and(min-width: 393px)and(max-width: 400px){ 
html{ 
font-size: 16px; 


@media screen and(min-width: 401px)and(max-width: 414px){ 
html{ 
font-size: 16.48px; 


@media screen and(min-width: 750px)and(max-width: 799px){ 
html{ 
font-size: 30.72px; 




著作权归作者所有。 
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:付博瀚
来源:付博瀚个人博客
链接: https://www.fubohan.com/

上一篇:js引入另一个js文件

下一篇:返回列表

文章评论

Top