1、 @custom-media --sm (min-width: 576px);
@custom-media --md (
min-width
:
768px
);
@custom-media --lg (
min-width
:
992px
);
@custom-media --xl (
min-width
:
1200px
);
.info-header {
@media (--md) {
width
:
50%
;// ipad
}
margin-left
:
auto
;
margin-right
:
auto
;
border-bottom
:
1px
solid
#dddddd
;//手机
}
Dynamically write font-size according to different screens, use rem as the width unit, and fix the layout viewport.
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
With a 640px design draft and a 750px visual draft, NetEase handled it like this:
var width = document.documentElement.clientWidth; // 屏幕的布局视口宽度
var rem = width / 7.5; // 750px设计稿将布局视口分为7.5份
var rem = width / 6.4; // 640px设计稿将布局视口分为6.4份
In this way, whether it is a 750px design draft or a 640px design draft, 1rem is equal to 100px on the design draft. So when px converts rem:
rem = px * 0.01;
On a 750px design draft:
75px 对应 0.75rem, 距离占设计稿的10%；
在ipone6上：
width = document.documentElement.clientWidth = 375px；
rem = 375px / 7.5 = 50px;
0.75rem = 37.5px; (37.5/375=10%；占屏幕10%)
在ipone5上：
width = document.documentElement.clientWidth = 320px；
rem = 320px / 7.5 = 42.667px;
0.75rem = 32px; (32/320=10%；占屏幕10%)
3、ipone适配ipad需要设置- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
- (NSUInteger)supportedInterfaceOrientations{
return UIInterfaceOrientationMaskPortrait;
}
This will cause the iPhone application to be displayed in landscape by default on the ipad mini, and the click event and layout will be affected.