Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iPhoneX横屏下的列表兼容 #1

Open
Wscats opened this issue Nov 17, 2017 · 0 comments
Open

iPhoneX横屏下的列表兼容 #1

Wscats opened this issue Nov 17, 2017 · 0 comments

Comments

@Wscats
Copy link
Owner

Wscats commented Nov 17, 2017

模拟iPhone的刘海界面

新建html,添加头部meta标签,定义viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

定义页面的样式

* {
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
}

#content {
	height: 100%;
	overflow: auto;
}
//这一个是定义刘海的关键样式
#liuhai {
	width: 30px;
	height: 320px;
	clip-path: polygon(0 0, 30px 30px, 30px 200px, 0 230px);
	background-color: #A4F4B0;
	shape-outside: polygon(0 0, 30px 30px, 30px 200px, 0 230px);
	float: left;
}

页面拥有一个刘海,和一个滚动列表

<div id="content">
	<!--刘海-->
	<div id="liuhai"></div>
	<!--列表-->
	<ul>
		<li>wscats</li>
                <!--这里省略多个li->
                <li>wscats</li>
	</ul>
</div>

clip-path

clip-path绘制图形

clip-path: polygon(0 0, 30px 30px, 30px 200px, 0 230px);

polygon接受四个坐标点(八个参数),定义了每一个点的坐标,从上图也能看出,起点是从左上角开始计算的,可以用百分比,也可以用px等单位

上面设置的第一个点位置为x:0,y:0,第二个点的位置为x:30px,y:30px,第三个点的位置为x:30px,y:200px,最后一个点位置为x:0,y:230px,最后自动闭合成一个类似iPhoneX刘海的矩形。

shape-outside

clip-path所绘制图形占用空间,会挤开其他元素

一切无误后,得到视图如下

image

控制刘海的位置

这里要讲将刘海位置从屏幕左上方移动到屏幕中间,实现原理是用JS计算刘海居中时候距离屏幕两侧的距离然后重新进行定位

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant