84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
开始要做这个东西,但是具体的宽度设置不太好确定。大神们介绍一下经验吧~
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
可以参照一下bootstrap的媒体查询宽度
bootstrap
/* 超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */ /* 小屏幕(平板,大于等于 768px) */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕(桌面显示器,大于等于 992px) */ @media (min-width: @screen-md-min) { ... } /* 大屏幕(大桌面显示器,大于等于 1200px) */ @media (min-width: @screen-lg-min) { ... }
这应该也是比较普遍的宽度吧?
另外 SemanticUI的媒体查询是这样的:
SemanticUI
可见和bootstrap是一样的。 具体可以看这里SemanticUI-container
可以参考网易nec的css media:
nec
css media
/* media */ /* 横屏 */ @media screen and (orientation:landscape){ } /* 竖屏 */ @media screen and (orientation:portrait){ } /* 窗口宽度<960,设计宽度=768 */ @media screen and (max-width:959px){ } /* 窗口宽度<768,设计宽度=640 */ @media screen and (max-width:767px){ } /* 窗口宽度<640,设计宽度=480 */ @media screen and (max-width:639px){ } /* 窗口宽度<480,设计宽度=320 */ @media screen and (max-width:479px){ } /* windows UI 贴靠 */ @media screen and (-ms-view-state:snapped){ } /* 打印 */ @media print{ }
可以参照一下
bootstrap
的媒体查询宽度这应该也是比较普遍的宽度吧?
另外
SemanticUI
的媒体查询是这样的:可见和
bootstrap
是一样的。具体可以看这里SemanticUI-container
可以参考网易
nec
的css media
: