简介
m-ph 是一个 npm 模块，它可以在网页中智能判断屏幕方向，并根据屏幕方向给网页添加 class，方便我们根据屏幕方向来改变布局或样式。
安装
使用 npm 安装 m-ph：
npm install m-ph
使用
引入 m-ph：
import MPH from 'm-ph';
初始化 m-ph：
MPH.init();
m-ph 默认会根据屏幕方向添加以下 class：
.ph-portrait：竖屏.ph-landscape：横屏
我们可以在 css 中使用这些 class 来改变布局或样式。
高级使用
m-ph 还支持根据屏幕的宽度加上对应的 class，方便我们根据屏幕尺寸来改变布局或样式。
使用以下代码来初始化 m-ph：
-- -------------------- ---- -------
----------
----------------------- -----
----------------------- ------------
---------------------- -
---- ---
---- ------
---- ------
----- -----
-
---在这个例子中，我们设置了 enableScreenWidthClass 为 true 来开启根据屏幕宽度添加 class 的功能。screenWidthClassPrefix 设置了添加的 class 前缀，screenWidthThresholds 则定义了具体的屏幕宽度和对应的 class 后缀。使用这个设置后，m-ph 可以自动根据屏幕宽度添加以下 class：
.ph-width-576：屏幕宽度小于 576px.ph-width-768-md：屏幕宽度大于等于 576px，小于 768px.ph-width-992-lg：屏幕宽度大于等于 768px，小于 992px.ph-width-1200-xl：屏幕宽度大于等于 992px，小于 1200px.ph-width-1200：屏幕宽度大于等于 1200px
这里我们可以根据需要使用这些添加的 class 来改变布局或样式。
示例代码
下面是一个示例代码，用来根据屏幕方向和宽度来改变布局和样式：
-- -------------------- ---- ------- -- ---- -- ------------ ----- - ------ ----- - -- ---- -- ------------- ----- - ------ ---- - -- ----- -- ------------- ----- - ------ ----- - ------------- -------- - -------- ----- - -- ----- -- ------------- ----- - ------ ---- - ------------- -------- - -------- ------ ------ ---- - -- ----- -- ------------- ----- - ------ ---- - ------------- -------- - ------ ---- - -------------- -------- - ------ ---- -
<div class="container"> <div class="main"></div> <div class="sidebar"></div> </div>
-- -------------------- ---- -------
------ --- ---- -------
----------
----------------------- -----
----------------------- ------------
---------------------- -
---- ---
---- ------
---- ------
----- -----
-
---这个示例代码演示了如何根据屏幕方向和宽度来改变布局和样式。当屏幕处于竖屏时，.main 占据整个屏幕宽度；当屏幕处于横屏时，.main 占据屏幕宽度的一半。当屏幕宽度小于 576px 时，.main 占据整个屏幕宽度，隐藏了 .sidebar；当屏幕宽度大于等于 576px，小于 768px 时，.main 占据 70% 的屏幕宽度，.sidebar 占据 30% 的屏幕宽度；当屏幕宽度大于等于 768px，小于 992px 时，.main 占据 60% 的屏幕宽度，.sidebar 占据 40% 的屏幕宽度；当屏幕宽度大于等于 992px，小于 1200px 时，.main 占据 60% 的屏幕宽度，.sidebar 占据 40% 的屏幕宽度；当屏幕宽度大于等于 1200px 时，.main 占据 70% 的屏幕宽度，.sidebar 占据 30% 的屏幕宽度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671f81e8991b448e3858