1. 设备是否为竖屏还是横屏
var mql = window.matchMedia("(orientation: portrait)");
if (mql.matches){
}
else{
}
2. 响应式栅格系统
@media (min-width:1200px){
@media (min-width: 768px) and ( max-width: 767px){
}
@media (max-width: 767px){
@media (max-width: 480px){
3. 使用自定义字体
@font-face {
font-family: '自定义字体名';
src: url('/icon/font.ttf'); // 字体文件的路径
}
4. 触摸和非触摸
document.documentElement.className += ('ontouchstart' in widow ) ? 'touch' : 'no-touch'
5. 解决retina屏幕,图片模糊问题(图片@2x)
.icon{
background-image: url('icon.png');
}
@media all and (max-width:320px) and (-webkit-min-device-pixel-ratio: 2){
.icon{
background-size: 50% 50%;
}
}