为什么我的 web 页面的宽度会根据它显示的屏幕而变化？

Question

So I have two monitors set up, one for coding and one for seeing the result using chrome. It looks like this on the smaller one The looks of the web page on smaller screen

but once I check it on my other screen it becomes like this The looks of the web page on bigger screen

I don't know if it helps but the resolution of the two screens are not the same.

Here is my code

 /*RESET STYLE*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*BASE STYLE*/ @font-face { font-family: Arvo; src: url('../fonts/Arvo.woff') format('woff'), url('../fonts/Arvo.ttf') format('truetype'); } @font-face { font-family: Helvetica; src: url('../fonts/Helvetica.woff') format('woff'), url('../fonts/Helvetica.ttf') format('truetype'); } *{ box-sizing: border-box; } [class*="col-"] { float: left; padding: 15px 0; }.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;} body{ font-size: 16px; font-family: Helvetica; color: #000; background-color: #fafafa; } h1 {font-size: 2em;} h2 {font-size: 1.5em;} h3 {font-size: 1.17em;} h4 {font-size: 1em;} h5 {font-size: .83em;} h6 {font-size: .672em;} /*BODY-HEADER*/.wrapper{ width: 70%; margin: 0 auto; height: 100%; display: block; }.upper-header{ top: 0; background-color: #fff; position: absolute; width: 100%; }.section{ display: flex; flex-direction: row; justify-content: space-between; height: 50px; background-color: #fff; }.section-left, .section-right{ margin: auto 0; }.section-right{ display: flex; justify-content: flex-end; }.section-left ul, .section-right ul{ display: flex; flex-direction: row; }.section-left li:nth-child(2), .section-left li:nth-child(3){ float: left; margin-left: 40px; }.section-right li:nth-child(1), .section-right li:nth-child(2){ float: right; margin-right: 40px; }.section-left a, .section-right a{ text-transform: uppercase; font-weight: 300; font-size: 12px; text-decoration: none; }.section-right a:hover, .section-left a:hover{ color: #4EC2FF; }.categories{ position: absolute; margin-top: 50px; width: 70%; display: flex; flex-direction: row; justify-content: space-between; }.categories-right{ display: flex; justify-content: flex-end; }.categories-right ul{ display: flex; flex-direction: row; margin-top: 25px; }.categories-right li:not(:nth-child(5)){ float: right; margin-right: 30px; }.categories-right a{ text-transform: uppercase; font-weight: 300; text-decoration: none; color: #fff; text-shadow: 1px 1px 2px #000; }.categories-right a:hover{ color: #4EC2FF; }.banner{ position: relative; margin-top: 135px; width: 100%; display: block; text-align: center; }.banner img{ max-width: 100%; max-height: 100%; }.banner-des{ width: 50%; position: absolute; top: 275px; left: 25%; }.banner-des h1:hover{ text-shadow: 2px 2px 2px #000; }.banner-des h1{ font-family: Arvo; font-weight: 300; color: #fff; font-size: 45px; }.banner-des h4,h1,p{ margin: 25px 0; text-align: center; }.meta, .banner-des h4{ font-family: Helvetica; font-weight: 300; font-size: 14px; color: #fff; }.meta > span { padding-right: 10px; }.meta span::after{ display: inline-block; content: "|"; color: #fff; font-size: 13px; padding-left: 10px; }.meta span:last-child::after{ display: none; } /*BODY-MAIN*/.main-post-header{ text-align: center; }.main-post-header h1{ font-family: Arvo; font-weight: 300; font-size: 35px; }.popular-post{ background-color: #fff; text-align: center; height: 350px; }.popular-post:hover{ background-color: rgba(0,0,0,0.1); }.popular-post img{ width: 90% }.popular-post p{ margin: 20px auto; width: 90%; }.popular-post p:nth-of-type(1){ color: #15638c; }.popular-post p:nth-of-type(even) { font-family: Arvo; font-size: 20px; font-weight: 300; } /*FOOTER*/.page-footer { float: left; width: 100%; background: #111111; padding-top: 25px; margin-top: 80px; }.page-footer>.wrapper::after{ content: '.'; font-size: 0px; height: 1px; width: 100%; clear: both; display: block; }.footer-col { float: left; width: 25%; }.page-footer h3 { font-size: 13px; text-transform: uppercase; }.page-footer h3::after { content: '.'; font-size: 0; width: 90%; height: 1px; background: #292929; display: block; margin: 15px 0; }.page-footer li { font-size: 13px; color: #999; line-height: 1.6; }.page-footer li:hover { color: #4EC2FF; cursor: pointer; }.copy { color: #585858; margin-top: 32px; text-align: left; }.social a { display: block; width: 44px; height: 44px; border-radius: 50%; background: #000; color: #fff; text-align: center; line-height: 44px; }.social a:hover { background: #fff; color: #ff0000; border: 1px solid #fff; }.social li { display: inline-block; }.social img{ width: 100%; z-index: -500; }

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Homepage</title> <link rel="stylesheet" href="css/homepage.css"> </head> <body> <header> <div class="upper-header"> <div class="wrapper"> <nav class="section"> <div class="section-left col-6"> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> </ul> </div> <div class="section-right col-6"> <ul> <li><a href="">Facebook</a></li> <li><a href="">Twitter</a></li> <li><a href="">Instagram</a></li> </ul> </div> </nav> </div> </div> <div class="wrapper"> <nav class="categories"> <div class="logo col-4"> <a href=""><img src="images/logo.png" alt=""></a> </div> <div class="categories-right col-8"> <ul> <li><a href="">How to</a></li> <li><a href="">Laptop</a></li> <li><a href="">Handphone</a></li> <li><a href="">Software</a></li> <li><a href="">Technews</a></li> </ul> </div> </nav> </div> <div class="banner col-12"> <img src="images/banner,jpg" alt=""> <div class="banner-des col-8"> <h4>TechNews</h4> <h1>These 5 Gadgets will improve your productivity for less than 50$</h1> <p class="meta"> <span class="date">June 8. 2033</span> <span class="author">by Thomas Smith</span> <span class="category">Culture</span> </p> </div> </div> </header> <main> <div class="wrapper"> <div class="main-post-header col-12"> <h1>Popular Post</h1> <h4>Don't miss to check out our most popular posts</h4> </div> </div> <div class="wrapper"> <div class="popular-post col-3"> <img src="images/a,jpg" alt=""> <p>How-to</p> <p>How to fix blue screen of death</p> <p>May 28. 2020</p> </div> <div class="popular-post col-3"> <img src="images/a,jpg" alt=""> <p>Handphone</p> <p>5 Reasons to ditch Apple for Samsung</p> <p>May 28. 2020</p> </div> <div class="popular-post col-3"> <img src="images/a,jpg" alt=""> <p>Laptop</p> <p>ASUS Zepyhrus 906A, The new flagship killer from ASUS</p> <p>May 28. 2020</p> </div> <div class="popular-post col-3"> <img src="images/a,jpg" alt=""> <p>Software</p> <p>Top 5 Open Source software to increase your productivity</p> <p>May 28. 2020</p> </div> </div> </main> <footer class="page-footer"> <div class="wrapper"> <div class="footer-col"> <h3>About</h3> <ul> <li>Privacy Policy</li> <li>Terms of Use</li> <li>News</li> <li>Events</li> </ul> </div> <div class="footer-col"> <h3>Get Involved</h3> <ul> <li>How to</li> <li>Review</li> <li>Laptop</li> <li>Handphone</li> <li>Technology</li> </ul> </div> <div class="footer-col"> <h3>Help Center</h3> <ul> <li>About Us</li> <li>Contact Us</li> </ul> </div> <div class="footer-col social"> <h3>Social</h3> <ul> <li><a href="" class="facebook"><img src="images/facebook-icon.png" alt=""></a></li> <li><a href="" class="twitter"><img src="images/twitter-icon.png" alt=""></a></li> <li><a href="" class="google-plus"><img src="images/googleplus-icon.png" alt=""></a></li> </ul> <p class="copy">© 2020. TechmMad. All Rights Reserved</p> </div> </div> </footer> </body> </html>

Answer 1

Once you may be using bootstrap to size columns in your grid, the text will always use the proper ratio and vary in different screen sizes. col-8 in your case will use 8/12 of your screen. On a wider screen you should have one line of text for:

<h1>These 5 Gadgets will improve your productivity for less than 50$</h1>

Answer 2

Using the px unit makes the element relative to monitor size. I recommend This page to understand absolute and relative units. Sorry if this wasn't the answer you were looking for.