Question

https://codepen.io/anon/pen/vmYZoJ

使用Foundation CSS Framework

制作着陆页

着陆页是任何设备的100％高度：即：html，正文，着陆页高度：100％

在着陆页中添加了文字

文字垂直居中，位置为：绝对值，顶部为：％;

问题：随着视口的高度变小，我的文字会聚集起来。

我的目标是为所有高度和宽度设置响应式着陆页

我对此问题的解决方案？：当文本崩溃时，进行最大高度的媒体查询并通过更改文本的顶部：％来重新定位文本。但问题是，如果有这些分辨率的设备：

300 x 300

400 x 300

500 x 300

目前我的媒体查询会随着宽度的增加而增加文本的字体大小。

[仅限示例]介质最小宽度（40em）介质最小宽度（100em）

但是如果设备宽度增加并且高度保持不变怎么办？这会使我的文本重叠，因为字体大小变大但高度仍然相同。

public class ExamplePagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

    public ExamplePagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    @Override
   public CharSequence getPageTitle(int position) {
       return mFragmentTitleList.get(position);
    }

   public void addFragment(Fragment fragment) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }
}

 <!-- Background --> 
 <div class="row column landing-bg">

    <!-- Info -->
     <h2 class="name">John Star</h2>
     <h3 class="role">Web Developer</h3>
    <!-- Info --> 

 </div>
 <!-- Background -->

Answer 1

我会将它们放在父元素中，然后定位父元素。

＆＃13;

/************************************
Global
************************************/

html, body {
	height: 100%;
	width: 100%;
}
.row {
	max-width: none;
}

/************************************
LANDING PAGE
************************************/

/* Background */
.landing-bg {
	height: 100%;
	width: 100%;
	padding: 0;
	background: url("https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/KADOHF81P4.jpg");
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: 0 70%;
	background-repeat: no-repeat;
}

/* Info */
.name, .role {
	text-transform: uppercase;
	text-align: center;
  line-height: 1;
  margin: 0;
}
.name {
	color: #fff;
	letter-spacing: 0.7rem;
}
.role {
	color: #3687be;
	font-weight: 400;
	font-family: monospace;
}
.nameHead {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

＆＃13;

<link href="https://cdn.jsdelivr.net/foundation/6.0.5/foundation.min.css" rel="stylesheet"/>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Palanquin+Dark" rel="stylesheet">


<!--LANDING PAGE-->

<!-- Background -->
<div class="row column landing-bg">

  <!-- Info -->
  <header class="nameHead">
    <h2 class="name">John Star</h2>
    <h3 class="role">Web Developer</h3>
  </header>
  <!-- Info -->

</div>
<!-- Background -->

<!--LANDING PAGE-->

＆＃13;

Answer 2

将文本包裹在绝对定位的div中，而不是绝对定位h2和h3标签。看看这个：

 <div class="row column landing-bg">

    <!-- Info -->
 <div class="bishment">
       <h2 class="name">John Star</h2>
       <h3 class="role">Web Developer</h3>
 </div>
    <!-- Info --> 

 </div>



.bishment {
  width:100%;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);

}

https://codepen.io/anon/pen/VbwMLE

当视口高度减小时，垂直对齐的文本会聚集在一起

2 个答案: