• April 12, 2018

    Setting The Viewport

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    Responsive Images

    Responsive images are images that scale nicely to fit any browser size.

    Using the width Property

    If the CSS width property is set to 100%, the image will be responsive and scale up and down:

    <img src="img_girl.jpg" style="width:100%;">

    รูปจะแสดงกว้างเต็มหน้าจอ (สัดส่วนอาจถูกขยาย ไม่ได้แสดงสัดส่วนที่ชัดที่สุด) แก้โดยใส่ max-width
    Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

    Using the max-width Property

    If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

    <img src="img_girl.jpg" style="max-width:100%;height:auto;">

    Show Different Images Depending on Browser Width
    (รูปต่างกัน เมื่อหน้าจอเปลียนไป)

    <picture>
      <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
      <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
      <source srcset="flowers.jpg">
      <img src="img_smallflower.jpg" alt="Flowers">
    </picture>

    Responsive Text Size

    <h1 style="font-size:10vw">Hello World</h1>

    Media Queries
    code

    <style>
    .left, .right {
      float: left;
      width: 20%; /* The width is 20%, by default */
    }
    
    .main {
      float: left;
      width: 60%; /* The width is 60%, by default */
    }
    
    /* Use a media query to add a breakpoint at 800px: */
    @media screen and (max-width: 800px) {
      .left, .main, .right {
        width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
      }
    }
    </style>

    ตัวอย่าง

    <!DOCTYPE html>
    <html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    * {
      box-sizing:border-box;
    }
    
    .left {
      background-color:#2196F3;
      padding:20px;
      float:left;
      width:20%; /* The width is 20%, by default */
    }
    
    .main {
      background-color:#f1f1f1;
      padding:20px;
      float:left;
      width:60%; /* The width is 60%, by default */
    }
    
    .right {
      background-color:#4CAF50;
      padding:20px;
      float:left;
      width:20%; /* The width is 20%, by default */
    }
    
    /* Use a media query to add a break point at 800px: */
    @media screen and (max-width:800px) {
      .left, .main, .right {
        width:100%; /* The width is 100%, when the viewport is 800px or smaller */
      }
    }
    </style>
    <body>
    
    <h2>Media Queries</h2>
    <p>Resize the browser window.</p>
    
    <p>Make sure you reach the breakpoint at 800px when resizing this frame.</p>
    
    <div class="left">
      <p>Left Menu</p>
    </div>
    
    <div class="main">
      <p>Main Content</p>
    </div>
    
    <div class="right">
      <p>Right Content</p>
    </div>
    
    </body>
    </html>
    

    ตัวอย่างข้างบน เอาไปใช้กับ หน้า single.php ของ wordpress เพื่อทำ responsive

    Responsive Web Page – Full Example

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    * {
      box-sizing: border-box;
    }
    .menu {
      float:left;
      width:20%;
      text-align:center;
    }
    .menu a {
      background-color:#e5e5e5;
      padding:8px;
      margin-top:7px;
      display:block;
      width:100%;
      color:black;
    }
    .main {
      float:left;
      width:60%;
      padding:0 20px;
    }
    .right {
      background-color:#e5e5e5;
      float:left;
      width:20%;
      padding:15px;
      margin-top:7px;
      text-align:center;
    }
    
    @media only screen and (max-width:620px) {
      /* For mobile phones: */
      .menu, .main, .right {
        width:100%;
      }
    }
    </style>
    </head>
    <body style="font-family:Verdana;color:#aaaaaa;">
    
    <div style="background-color:#e5e5e5;padding:15px;text-align:center;">
      <h1>Hello World</h1>
    </div>
    
    <div style="overflow:auto">
      <div class="menu">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
      </div>
    
      <div class="main">
        <h2>Lorum Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>
    
      <div class="right">
        <h2>About</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      </div>
    </div>
    
    <div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">© copyright w3schools.com</div>
    
    </body>
    </html>
    

    Responsive Web Design – Frameworks

    (ใช้กับหน้าที่เป็น column)

    <!DOCTYPE html>
    <html>
    <title>W3.CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <body>
    
    <div class="w3-container w3-green">
      <h1>W3Schools Demo</h1> 
      <p>Resize this responsive page!</p> 
    </div>
    
    <div class="w3-row-padding">
      <div class="w3-third">
        <h2>London</h2>
        <p>London is the capital city of England.</p>
        <p>It is the most populous city in the United Kingdom,
        with a metropolitan area of over 13 million inhabitants.</p>
      </div>
    
      <div class="w3-third">
        <h2>Paris</h2>
        <p>Paris is the capital of France.</p> 
        <p>The Paris area is one of the largest population centers in Europe,
        with more than 12 million inhabitants.</p>
      </div>
    
      <div class="w3-third">
        <h2>Tokyo</h2>
        <p>Tokyo is the capital of Japan.</p>
        <p>It is the center of the Greater Tokyo Area,
        and the most populous metropolitan area in the world.</p>
      </div>
    </div>
    
    </body>
    </html>
    

    Bootstrap

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <div class="jumbotron">
        <h1>My First Bootstrap Page</h1>
      </div>
      <div class="row">
        <div class="col-sm-4">
          ...
        </div>
        <div class="col-sm-4">
          ...
        </div>
        <div class="col-sm-4">
        ...
        </div>
      </div>
    </div>
    
    </body>
    </html>

    https://www.w3schools.com/html/html_responsive.asp



เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!






เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories