CSS#Flex-box, border-size, onresize() event, Media Queries

時間 2019-11-13

標籤 css#flex css flex box border size onresize event media queries 欄目 CSS 简体版

原文原文鏈接

Flexboxjavascript
Pseudo-classescss
box-sizing: border-boxhtml
HTML DOM event resize()java
@media Queries：根據一些css條件，觸發一些css的變化。（無需javascript）
Responsive CSS ：網格Gird就是模擬了Bootstrap，配合@media，能夠激發不一樣的類。

Knowledge: Flexbox Layout Module

我的感受能夠替代Bootstrap4的佈局了。固然仍是Bootstrap4用起來更方便一些。 css3

傳統的佈局：web

Block
Inline
Table
Positioned, 用於指定元素位置。

新的Flexbox. 用於響應式佈局，無需使用float 或 positioning.express

父元素設置:
display: flex | inline-flex

子元素佈局：
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

方法：bootstrap

先定義根元素特性

定義一個根元素，做爲容器<div class='flex-container'>
根元素: display: flex; 讓這個元素使用a block-level flex的模式
若是一個元素成爲flex container, 它可使用相關的6個特性(點擊)：

flex-direction: row | row-reverse | column | column-reverse | initial |inherit
flex-wrap: nowrap | wrap | wrap-reverse
flex-flow 就是👆兩個特性的方便寫法。
justify-content：文本對齊 flex-start|flex-end|center|space-between|space-around

用這個調整導航欄按鈕靠右， flex-end。不要用flex-derection: row-reverse

align-items: flex-start|flex-end|center| stretch(默認：拉伸填滿container)
- 垂直方向上的一行元素靠上，靠下，仍是居中,
align-content: 排列flex lines, 而不是items。用於修改flex-wrap的行爲。
完美的居中的一個元素：同時使用justify-content: center和align-items: center

再定義子元素特性：

order : 當父元素定義flex後，子元素根據order：number特性來進行排序
flex-grow: number; 設置子元素相對其餘子元素的grow相對大小，數字是倍數。
flex-shrink: number; 這個特性能夠用於animatiable ，至關於其餘的子元素，壓縮多少。
flex-basis：number | auto | inherit | initial ;
- 指定最初的子元素的length; 例子：flex-basis: 200px;
- flex-basis: auto; 默認值。能夠不寫；表明長度等於flexible item的長度。如item沒有指定長度，使用item的content的長度。
flex: flex-grow, flex-shrink, flex-basis;
- flex特性指定一個flem item如何grow/shrink以便適應container中可利用的空間。
- 三合一。例子：flex: 0 0 200px;
- 三個特性都是能夠配合animation
align-self特性重寫alignment設置，再也不使用container的align-items特性。
- flex-start | flex-end | center

object.style.flexGrow = "number|initial|inherit" document.getElementById("myBlueDiv".style.flexGrow = "5";

網站完整的頁面佈局案例

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_website2瀏覽器

flex有auto, initial, none， <positive-number>4種選項。ide

flex: auto;

根據item的width,height特性。爲了適應container, 既能夠放大也能夠縮小。至關於flex: 1 1 auto;

flex:initial;

這是默認值。根據item的width/height特性。只能縮小，來適應container，不能放大。至關於flex: 0 1 auto;

⚠️子元素不會縮小到小於minimum content size。

flex: none;

根據item的width/height特性。徹底不能彎曲inflexible。不會根據container，改變自身。至關於flex: 0 0 auto;

左右的佈局：

side位於左邊，main位於右邊。處於同一個<div>內。比較固定佈局的寫法。

bootstrap4，能夠經過設置適應不一樣的設備大小，有不一樣的佈局。在較小的屏幕, main全佔，並隱藏side。


.side {
// 帶單位的。是flex-basis;
 flex: 20%;
    background-color: #f1f1f1;
    padding: 20px;
}

/* Main column */
.main {
 flex: 70%;
    background-color: white;
    padding: 20px;
}

子元素在垂直排列時，如何全佔一行：

垂直須要容器元素設置flex-direction: column;

而後，在子元素，使用text-align: center便可。無需使用align-items

另外一個案例：圖片的不規則排序 (僞)

技巧：

使用4組<div>，每組是一列column, 佔flex: 25%。<div>添加max-width:25%特性。
再根據@media (max-width: xxxpx) { ... } 對子元素設置flex-basis，並添加max-width: XX%。
若是屏幕最小，子元素獨佔能夠改爲flex-direction: column.

⚠️：根元素須要添加flex-wrap: wrap。

Pseudo-classes

:nth-of-type(n) 選擇知足某種類型的元素。或者同nth-child(n)

<style> 
p:nth-of-type(odd) {
    background: red;
}

p:nth-of-type(even) {
    background: blue;
}
</style>

<body>

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>

</body>
</html>

:nth-child(n) 　　選擇是父元素的第n個子元素的全部某元素。

知識點css#boxSizing

用於如何計算width| height。

設置爲border-box，width = contentwidth + padding + border

設置爲content-box, width - content-width

目的：佈景的調整。

我的理解，把content的寬／高縮減一點，留給padding+border，讓總和等於width/height

例子：https://www.w3schools.com/CSSref/tryit.asp?filename=trycss3_js_box-sizing

知識點 HTML DOM event resize()

when the browser window has been resized。

`@media` rule

相似Bootstrap4中對不一樣設備寬度的設置。*-sm, *-lg

針對不一樣的types/devices的寬／高特性，使用不一樣的web style。

Media queries can be used to check many things, such as:

width and height of the viewport（屏幕寬／高）
width and height of the device（設備寬／高）
orientation (is the tablet/phone in landscape or portrait mode?)平板\手機的方向：屏幕橫過來或者豎立。
resolution(clear picture)清晰度／分辨率

格式：

@media not|only mediatype and (expressions) { CSS-Code; }
或者其餘
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

例子：

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">

mediatype: all | print | screen | speech (屏幕閱讀器)

通常使用screen，包括電腦，平板，手機。

expressions: 就是觸發點。

大量案例：

能夠看👆的flex的案例：https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media3

對.row,.navbar改變了flex-direction佈局。
／／省略了mediatype。

@media (max-width: 700px) {
    .row, .navbar {   
        flex-direction: column;　　／／從row變爲column }
　　 .side {
　　　　 display: none; //隱藏邊欄。 
　　}
}

還能夠根據瀏覽器的orientation佈局：（橫屏landscape：寬 > 高；豎屏 portrait: 寬 < 高）

//當寬 > 高時， body元素的背景色改變。
@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

使用逗號，多個and來聯合:

// 當屏幕寬度在600到900之間，或者屏幕寬度大於1100px時：

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
     font-size: 50px;
  　　background: yellow;    
　}  
}

相關： window.matchMedia()方法，

返回 a MediaQueryList object representing the results of the specified CSS media query string.

The value of the matchMedia() method can be any of the media features of the CSS @media rule, like min-height, min-width, orientation, etc.

CSS Responsive Web Design

讓網頁使用各種設備。

只使用HTML , CSS。無需JavaScript

前置<head>內。

設置Viewport! 用戶的可用區域。

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

⚠️：

不要使用固定寬度的元素。好比image。
不要讓內容依賴一個固定的視窗。不一樣的設備width也不一樣。
使用CSS#media查詢，從小到大的屏幕設計。

Grid-View

就是bootstrap的col-*的用法。一行12列。全width是100%

第一步：創建響應網格：

／／全部元素自動規範border, padding, content的和等於 width | height。
* {
    box-sizing: border-box;
}

第二步：使用col-*分列。

col-(1~12) ： 1列佔width的8.33%。

col-3的意思就是佔3列的寬度，col-10就是佔10列的寬度。注意兄弟元素的寬度總和是12列。

.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%;}


[class*= "col-"] { float: left; padding: 15px; border: 1px solid red; } <div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Media Query

必須先要考慮的就是移動設備。

Bootstrap4就是封裝了CSS#Gird的功能。

案例：

https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_col-s

這個例子，使用@media設計了2套適合平板和臺式機的樣式。

col-s-*用於平板，col-*用於臺式機。

使用@media觸發效果。

/* For 手機 phones: */
[class*="col-"] {
width: 100%;
}

@media only screen and (min-width: 600px) {
/* For 平板tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
。。。
}
@media only screen and (min-width: 768px) {
/* For 臺式機: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
。。。
}

<div class="row">
    <div class="col-3 col-s-3 menu">。。。</div>
    <div class="col-6 col-s-9">。。。</div>
    <div class="col-3 col-s-12">。。。</div>
</div>

響應 image

width, max-width 區別

塊級別元素如<p>，經過設定它的width=「500px」,會固定寬度，

若是content的單行超過window寬度，會增長橫軸scroll bar。
若是小於window寬度，會正常顯示

塊級別元素<p>，經過設定它的max-width=「500px」,

若是content的單行超過window寬度，會wrap 換行。
若是content的單行，超過max-width，會wrap換行。
最大是多大，適應窗口。

塊級別元素<p>, 設定max-width= 50%;

若是content單行超過窗口寬度的一半，wrap換行。永遠佔窗口寬度的一半。

非塊元素<img>, 設定max-width="100%"

若是它的默認寬度 < window.innerWidth，則正常顯示, 右側留margin。
若是它的默認寬度 > window.innerwidth, 會<img>的width會縮小。並全佔一行寬度。

非塊元素<img>, 設定width=100%

始終全佔一行。

案例：https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image3

img {
    width: 100%;
    height: auto;
}

當屏幕在600px到768px之間時：<img>所處<div clas='col-6 col-s-9'>, 適應col-s-9，佔全寬的9份。

當屏幕大於768px時， <img>所處<div clas='col-3 col-s-9'>, 適應col-6，佔全寬的3份。

當屏幕小於600px時，所有元素都是佔全單行顯示。

背景圖：

background-size： contain | 100% 100% | cover

圖片會去適應容器。容器寬度 > 圖片默認寬度時，圖片使用自身寬度。

<style>
div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-repeat: no-repeat; background-size: contain;
    border: 1px solid red;
}
</style>

the background image will stretch to cover the entire content area:
橫向拉伸到整個容器。圖片若是默認小於窗口，圖片會變形。

<style>
div {
    width: 100%;
    height: 400px; background-image: url('img_flowers.jpg'); background-size: 100% 100%; border: 1px solid red;
}
</style>

background-size: cover，全占上容器，橫豎都會拉伸。

利用@media 能夠在不一樣的devise上使用, 大小不一樣但內容類似的圖標。也可使用<picture>標籤設置。

@media 的min-device-width能夠替代min-width。

HTML5新的<picture>標籤

設置不一樣的srcset='xxx.jpg'

使用特性srcset, media

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>