CSS：响应式设计，位置卡可适合任何尺寸的屏幕中间

时间：2018-12-26 11:08:44

标签： javascript html css css3 css-selectors

我有这段代码，无论屏幕大小是多少，屏幕中间都有配置文件。对于任何类型的屏幕，它通常看起来都太小。如何定位个人资料卡以使其几乎充满整个屏幕？

@import url("https://fonts.googleapis.com/css?family=Montserrat");
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
  width: 100%;
  height: 100%;
  font-family: "Montserrat";
  color: #303633;
  background-color: #C8D9E7;
  overflow: hidden;
  font-size: 1em;
  font-style: normal;
  -webkit-appearance: none;
  outline: none;
  text-rendering: geometricPrecision;
  perspective: 1000px;
}

a {
  position: relative;
  display: inline-block;
  padding: 12px 35px;
  margin: 0 0 20px;
  background-color: #e1306c;
  color: white;
  border-radius: 5px;
  transition: all 0.3s;
  letter-spacing: 2px;
  font-size: 0.85em;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 2px 30px rgba(225, 48, 108, 0.4);
}
a:hover {
  background-color: #e75d8c;
}

.content-wrapper {
  width: 300px;
  max-height: 530px;
  border-radius: 5px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
  background: #fbfcee;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y: scroll;
  overflow-x: hidden;
  text-align: center;
}

.content-wrapper .img {
  width: 302px;
  height: 350px;
  position: relative;
  overflow: hidden;
}

.content-wrapper img {
  /*
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  object-fit: contain;
  */
  width: 100%;
  height: 100%;
  object-fit: cover;
}




.profile--info {
  text-align: left;
  padding-top: 10px;
}
.profile--info span {
  font-family: "Open Sans", "Adobe Blank";
  z-index: 1;
  left: 15px;
  top: 15px;
  font-size: 0.575em;
  color: rgba(84, 95, 89, 0.75);
  display: block;
}
.profile--info span.username {
  font-weight: 700;
  font-style: normal;
  font-size: 1em;
  color: black;
}
.profile--info span.userquote {
  margin-top: -15px;
  font-size: 0.7em;
  color: rgba(84, 95, 89, 0.75);
}

.user {
  background-color: white;
  width: 100%;
  margin-top: 0;
  max-height: 600px;
  position: relative;
  padding: 0 30px;
  box-sizing: border-box;
}

.user-social-wrapper {
  display: flex;
  justify-content: space-around;
  position: relative;
  padding: 5px 0;
  padding-bottom: 15px;
}

.user-social-wrapper .user-info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-weight: 200;
  flex: 1 1;
}
.user-social-wrapper .user-info span:first-child {
  font-size: 1.25em;
}
.user-social-wrapper .user-info span:last-child {
  font-size: 0.75em;
  color: rgba(84, 95, 89, 0.75);
}

.shots {
  width: calc(100% + 60px);
  margin-left: -30px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.shots .shot {
  overflow: hidden;
  position: relative;
  width: 100px;
  height: 100px;
}

.shots .shot img {
  transition: all 0.255s;
  width: 102px;
}
<div class="content-wrapper">
      <div class="user">
        <div class="shots">
                        <div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fcc951ea7fb4756657e6a7d042bf28f3/5CB41E95/t51.2885-15/e35/44305549_353634695394272_4379074065337998962_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMjA0MDQ0OTAyMTY1Njc4Mg%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/cc7f49ae37334eff4a2e844ffbebaa21/5CB841C6/t51.2885-15/e35/41336764_2309590515939856_3014107714986624367_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg3Nzg1Mjk1Njk0NDkwNTAwMg%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/d8b9d0e098128aad6eac6c39c19439cb/5CD059B2/t51.2885-15/e35/46699770_789255231412285_7247415646102729111_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkyMjcyMTIwOTQyODk0Mjc5NQ%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/a0efc75790b1d1a20306b4b9ee8c0d31/5C9D1D98/t51.2885-15/e35/42593422_668756993510074_548785136612309253_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4MjI5MDk5MzYyODEwOTk0Mw%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fa49d4e551525ac7a288784e0866f7cf/5CD53EA6/t51.2885-15/e35/44442144_2039456152959656_8454847146314760657_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMTEwMTUwMTEzOTEzMzk4MA%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/845ad7174d012da1d1b62ac375d2b466/5CD46203/t51.2885-15/e35/43816352_986229031581012_2433270463824730761_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg5NTQwODg2MDE5NjA5OTA1NQ%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/7d4877bc850a66d5aeb539c5510add7e/5C9BD445/t51.2885-15/e35/43621864_2280294755587222_1177965970195440793_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NjY0MTkwODQ0MTE4MDcyOQ%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/5252d016bae25d4ef4bca9e0c0a0306b/5CCFD742/t51.2885-15/e35/42927631_265838184102659_8658034749053379565_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxNjkzMDk2MDM3NTMwNTUzOA%3D%3D.2"></div>
                        <div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/880acf9db110584cb44b3b69ad0a366f/5CB3E901/t51.2885-15/e35/41866047_1814622118587789_2219135764187038727_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NDI5OTEwNzU1ODU4OTEzMg%3D%3D.2"></div>
                  </div>
                <div class="profile--info"><span class="username">ʏɪɴʀᴜɪ ᴅᴇɴɢ</span><span>☺@bobby_dyr</span><br/><span class="userquote">In 2018, ʏɪɴʀᴜɪ ᴅᴇɴɢ received 164❤️, 7✉️ per post by average, and a total of</span></div>
        <div class="user-social-wrapper">
          <div class="user-info user-posts"><span>104</span><span>Shots</span></div>
          <div class="user-info user-followers"><span>16,964</span><span>Likes</span></div>
          <div class="user-info user-following"><span>643</span><span>Comments</span></div>
        </div>
      </div>

我有这段代码，无论屏幕大小是多少，屏幕中间都有配置文件。对于任何类型的屏幕，它通常看起来都太小。如何定位个人资料卡以使其几乎充满整个屏幕？

从(too small)到此(ideal)基本上应该怎么做

2 个答案:

答案 0 :(得分：1)

只需更改它：

 .shots .shot {
        overflow: hidden;
        position: relative;
        width: 33%; // <-- change it
        height: 100px;
        flex-grow: 1; // <-- add
    }

答案 1 :(得分：0)

我将使用媒体查询，并在不同的屏幕尺寸上定位要修改的类，以使其适合您的需要。一些有用的链接：

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

在您的情况下，您需要在移动设备上将卡的宽度修改为100％，以实现屏幕截图上的设计。希望有道理！ ：）

相关问题
最新问题