金魚系列、 RWD (上)


Posted by s103071049 on 2021-06-06

不同裝置視覺差異:媒體查詢 media  queries

The @media rule is used in media queries to apply different styles for different media types/devices.
網頁可以在不同的裝置上呈現,但不同的裝置他的尺寸、大小都不同,網頁該如何呈現 ? 我們是否可以針對不同的裝置,設定不同的外觀與顯示方式 ?

viewport(視口) 裝置的螢幕尺寸,關係到解析度。我們可以利用阿莫斯大大螢幕解析度查詢,裡面另有字級表與網頁字數表,不同的解析度/移動/晃動,哪個設計對使用者相對較順眼、較容易看清楚。
note:9px 以下 chrome 瀏覽器就不會顯示正確像素。

媒體查詢起手式

@media screen and (條件) and (條件)

如果要增加條件,使用 and ()

note:ipad 的解析度:1024 * 768,所以小於 768 就當作手機

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .amos{
      width: 100%;
      height: 300px;
    }
    .amos1{
      background: #faa;
    }
    .amos2{
      background: #aaf;
    }

    @media screen and (min-width: 768px){
      .amos{
        width: 50%;
        float: left;
      }
    }
  </style>
</head>
<body>
  <div class='amos  amos1'>amos1</div>
  <div class='amos  amos2'>amos2</div>

</body>
</html>

viewport 是設定裝置的縮放模式。

content="width=device-width 視窗的內容的寬度等於裝置的寬度,事實上手機上會以裝置的解析度呈現網頁。舉例來說:裝置的解析度是 2 倍,裡面可以呈現的像素量(寬度) = 640顆 ,或者說他可以呈現的是 640個點,當我現在是 2 倍解析度,也就是我要呈現 320 個點的寬度,但是用 640 個點去呈現他,這樣每一個點就更細緻。原本一顆點我現在用兩顆去模擬他,點數看起來更小,畫質也就更細。這就是縮放比例的概念。

initial-scale=1.0" 是修正 ios safari 早期的 bug。
這一句不加,會出問題!
<meta name="viewport" content="width=device-width, initial-scale=1.0">

在手機上不呈現、在桌機/平板要呈現

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>document</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .amos{
      width: 100%;
      height: 300px;
      display: none;
    }
    .amos1{
      background: #faa;
    }
    .amos2{
      background: #aaf;
    }

    @media screen and (min-width: 768px){
      .amos{
        background: red;
        display: block;
      }
    }
  </style>
</head>
<body>
  <div class='amos  amos1'>amos1</div>
  <div class='amos  amos2'>amos2</div>

</body>
</html>

一百種裝置,一百種世界

裝置尺寸百百種,到底要如何設定網頁,讓他可以一體通用所有裝置 ? 區塊的寬度該怎麼設,才不會跑版 ?

解法、將寬度設成百分比

設計時要以手機為優先,還是桌機為優先 ?
盡量以手機為優先,但仍會依照專案有不同優先順序。

結論 : 都可以用媒體查詢進行上述處理。

實作

wrap 是裝置所有資料的父層,我們可能做滿版,也可能做固定寬。
滿版要留意,超級大螢幕狀況。對於這些超寬螢幕而言,做到滿版可能不易閱讀。所以我們通常會對 wrap 設定寬度多少,最大寬度多少。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrap {
      width: 100%;
      max-width: 1400px;
    }
  </style>
</head>

<body>
  <div class='wrap'>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>  
  </div>

</body>
</html>

盡量希望尺寸可以被 2, 3, 4, 5, 6 整除。因為這些會是比較常見的欄位數量。
mac 筆電大概 1440px,但要扣掉旁邊卷軸寬度。所以抓 1400。正常來說,盡量希望尺寸可以被 2, 3, 4, 5, 6 整除。因為這些會是比較常見的欄位數量。

.wrap {
      width: 100%;
      max-width: 1400px;
    }

底下 item 我希望在手機上寬度是 100% 或者我不設定寬度,利用 margin 將它與上下左右設定一定距離。

.item {
      margin: 0 12px 20px; /*上方 左右 下方 */
    }

加上一點點 padding 將它撐開、加上 color 讓內容物顏色更加明顯。

.item {
      margin: 0 12px 20px;
      background: rosybrown;
      padding: 12px;
    }
<div class='wrap'>
    <div class="item">
      <h3>title</h3>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur illo, quidem minima cum magni ex eum tempore. Voluptates dignissimos nostrum neque illo repellendus sit, iste tempore sint architecto quaerat. Laborum?</p>
    </div>
    <div class="item">
      <h3>title</h3>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur illo, quidem minima cum magni ex eum tempore. Voluptates dignissimos nostrum neque illo repellendus sit, iste tempore sint architecto quaerat. Laborum?</p>
    </div>
    <div class="item">
      <h3>title</h3>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur illo, quidem minima cum magni ex eum tempore. Voluptates dignissimos nostrum neque illo repellendus sit, iste tempore sint architecto quaerat. Laborum?</p>
    </div>  
  </div>

基本上,上面會是手機的外觀。


現在處理桌機的部分,先使用媒體查詢。我們先從 ipad 製作,所以設定 min-width: 768px,因為要做到橫排,所以設定 wrap 是 display flex。所以在平板以上,就會用 flex 的屬性針對內容物做設定,但是到手機的時候就會沒有作用。

@media screen and (min-width: 768px) {
      .wrap {
        display: flex;
      }
    }

刪減假文 => 跑版。
可以針對每個 item 計算寬度,或直接給寬度。

最後代碼長相

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .wrap {
      width: 100%;
      max-width: 1400px;
      margin: auto;
    }
    .item {
      margin: 0 12px 20px;
      background: rosybrown;
      padding: 12px;
    }
    @media screen and (min-width: 768px) {
      .wrap {
        display: flex;

      }
      .item {
        width: 500px;
      }
    }
  </style>
</head>

<body>
  <div class='wrap'>
    <div class="item">
      <h3>title</h3>
      <p>Lorem ipsum dolor sit, amet consecte Laborum?</p>
    </div>
    <div class="item">
      <h3>title</h3>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur illo, quidem minima cum magni ex eum tempore. Voluptates dignissimos nostrum neque illo repellendus sit, iste tempore sint architecto quaerat. Laborum?</p>
    </div>
    <div class="item">
      <h3>title</h3>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur illo, quidem minima cum magni ex eum tempore. Voluptates dignissimos nostrum neque illo repellendus sit, iste tempore sint architecto quaerat. Laborum?</p>
    </div>  
  </div>

</body>
</html>

#RWD #web-design







Related Posts

[Release Notes] 20201122_v1 - Support Google Oauths Login/Signup

[Release Notes] 20201122_v1 - Support Google Oauths Login/Signup

畫frequency response和phase response(MATLAB))

畫frequency response和phase response(MATLAB))

Vue props 隨筆

Vue props 隨筆


Comments