# ChhoeTaigiWebsite CSS/RWD iūⁿ-sek pit-kì

###### tags: `rwd`

## Methodology
Ki-pún-siōng sī iōng BEM ê goân-chek lâi siá:
[http://getbem.com/](http://getbem.com/)

## Gí-giân
Sú-iōng SCSS:
[https://sass-lang.com/guide](https://sass-lang.com/guide)

Ū iōng-tio̍h Variables, Nesting, Partials, Extend (téng-koân ê url ū kán-tan ê soat-bêng), koh-ū Parent Selector:
[https://sass-lang.com/documentation/style-rules/parent-selector](https://sass-lang.com/documentation/style-rules/parent-selector)

## Kiat-kò͘
Chit-ê tóng-àn kā bô-kâng ê Partial tóng-àn import li̍p-lâi:
[https://github.com/miau715/ChhoeTaigiWebsite/blob/rwd/imports/stylesheets/styles.scss](https://github.com/miau715/ChhoeTaigiWebsite/blob/rwd/imports/stylesheets/styles.scss)

Kî-tha ê iūⁿ-sek tóng-àn mā lóng khǹg tī chia:
[https://github.com/miau715/ChhoeTaigiWebsite/tree/rwd/imports/stylesheets](https://github.com/miau715/ChhoeTaigiWebsite/tree/rwd/imports/stylesheets)

Í-hā chiàu import ê sūn-sū soat-bêng:

* ### _variables.scss
Che sī khǹg variables kah chi̍t-tiâu choan-mn̂g iōng-lâi extend ê iūⁿ-sek siat-tēng.
* ### lib/_normalize.scss
Che sī lia̍h: [https://necolas.github.io/normalize.css/](https://necolas.github.io/normalize.css/)
Hō͘ bô-kâng ê browser hián-sī ē-tàng it-tì.
* ### lib/_sr-only.scss
Che sī lia̍h:
[https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034](https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034)
Hō͘ bô hián-sī tān-sī ū chí-sī kong-lêng ê bûn-jī (tāi-pō͘-hūn sī siat-kè-siōng iōng hû-hō ah-sī tô͘-phìⁿ tāi-thè só͘-í kā bûn-jī chhàng khí-lâi) mā-sī ē-sái hō͘ screen reader tha̍k tio̍h.

* ### _base.scss
Che sī ki-pún ê HTML element ê iūⁿ-sek siat-tēng.

* ### _layout.scss
Kah ki-pún ōe-bīn layout ū koan-hē--ê siá tī chia.

* ### _utilities.scss
Tī bô-kâng ê ia̍h-bīn lóng ē iōng-tio̍h ê lêng-kiāⁿ khǹg tī chia. Chhiūⁿ button, search form ê pō͘-hūn ê iōng-tio̍h ê pâi-pán hong-sek téng-téng.

* ### _header.scss
Bāng-chām siōng téng-koân hit tè ū Menu ê só͘-chāi siong-koan--ê lóng siá tī chia.

* ### _footer.scss
Bāng-chām siōng ē-kha hit tè ū gí-giân menu kah thóng-kè ê só͘-chāi siong-koan--ê lóng siá tī chia.

* ### _basic-search.scss
"Kán-tan chhōe" ia̍h-bīn siong-koan--ê.

* ### _adv-search.scss
"Siông-sè chhōe" ia̍h-bīn siong-koan--ê.

* ### _explanation.scss
"Án-chóaⁿ chhōe" ia̍h-bīn siong-koan--ê.

* ### _app.scss
"Chhiú-ki-á App" ia̍h-bīn siong-koan--ê.

* ### _about.scss
"Liáu-kái ChhoeTaigi" ia̍h-bīn siong-koan--ê.

* ### _search-result.scss
Search liáu-āu hián-sī ê pō͘-hūn lóng tī chia.

* ### _landing.scss
Kū--ê Landing ia̍h-bīn, èng-kai khòaⁿ-bē-tio̍h tān-sī kiaⁿ koh ū siáⁿ-mih iōng-tô͘ to̍h seng pó-liû.

## Kî-tha tiōng-tiám
* RWD lóng sī siá tī kok ê tóng-àn siōng ē-kha, chiàu bô-kâng lêng-kiāⁿ ê su-iàu siat bô-kâng ê breakpoint.
* Goân-lâi iōng chiok-chē id ê siá-hoat tāi-pō͘-hūn lóng thiah tiāu ah, in-ūi id ê hō͘ selector pìⁿ chiok tāng bô hó hok-siá, ē bô hó chò RWD. Nā-sī m̄-chai-iáⁿ CSS specificity sī siáⁿ-mih, ē-tàng khòaⁿ: [https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/](https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/)
* Ki-pún siōng layout to̍h-sī iōng `class='container'` ê iông-khì kā lāi-iông pau khí-lâi to̍h ē-sái khǹg tī ōe-bīn tiong-kan mā ē ū chèng-khak ê khoah-tō͘, nā-sī ka sin--ê mi̍h-kiāⁿ li̍p-khì ài chù-ì ū chit-ê iông-khì bô, nā-sī bô to̍h ài ka, nā-sī ū mā ài chù-ì bē-sái pau nn̄g chàn.