ウェブページを変更するには何が必要ですか？

Question

私はページを反応させる必要があります。画面のサイズにかかわらず、私のコンテンツは垂直方向と水平方向の両方に整列する必要があり、ブラウザの端とコンテンツの間にいくらかのマージンがあります。

フィドルリンク：あなたのCSSここでメディアクエリサイズのhere

body { 
 
\t background-color: black; 
 
} 
 
.parent { 
 
    display: table; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.centered-content { 
 
\t display: table-cell; 
 
    vertical-align: middle; 
 
    margin:0 auto; 
 
} 
 
p { 
 
\t font-family: Lato; 
 
\t font-size: 21px; 
 
\t font-weight: 300; 
 
\t color: white; 
 
\t margin: 0 auto; 
 
\t max-width: 640px; 
 

 
} 
 
@media (max-width: 991px) { 
 
    .default { 
 
    width: 520px; 
 
    margin: 0 auto; 
 
    } 
 
    .centered-content { 
 
    width: 640px; 
 
    margin-right: auto; 
 
    } 
 
} 
 

 
@media (max-width: 767px) { 
 
    .centered-content { 
 
    width: 520px; 
 
    } 
 
} 
 

 
@media (max-width: 479px) { 
 
    .centered-content { 
 
    width: 272px; 
 
    } 
 
    p .default { 
 
    max-width: 272px; 
 
    margin-top: 48px; 
 
    font-size: 19px; 
 
    } 
 
}

div class="parent"> 
 
\t <div class="centered-content"> 
 
\t  <p class="default"> 
 
\t   Hey, I'm lorem. 
 
\t   <br><br> 
 
\t   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t   proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
\t   <br><br> 
 
\t   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
\t   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
\t   cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
\t   proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
\t  </p> 
 
\t </div>

Answer 1

ユーザー@mediaクエリは

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
/* Styles */ 
} 
/********** 
iPad 3 
**********/ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 
/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

/* iPhone 5 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* iPhone 6 ----------- */ 
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* iPhone 6+ ----------- */ 
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* Samsung Galaxy S3 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* Samsung Galaxy S4 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

/* Samsung Galaxy S5 ----------- */ 
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

Answer 2

あなたの質問は本当に不明です。私の2セントは、あなたが応答性を追求するのを手助けするために、ブートストラップまたは他の反応的なフレームワークを使用すべきであるということです。 http://getbootstrap.com

は、ドキュメントを読み、グリッドシステム

ハッピープログラミングについて学びます！