mediaqueryとreset.cssの管理

GitHub Edit Page
この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。

mediaquery 管理

自分なりに考えた結果です。

嘘です参考にした結果です。

pc()
	@media all and (min-width: 769px)
		{block}
sp()
	@media all and (max-width: 768px)
		{block}

をどこでもいいけど、base.styl みたいなのに設定しといて呼び出す時

.element
	+pc()
		// ~ pc時のスタイル ~
	+sp()
		// ~ tab・sp時のスタイル ~;

ってやれば以下のように生成。

@media all and (min-width: 769px) {
	.element {
		/* ~ pc時のスタイル ~ */
	}
@media all and (max-width: 768px) {
	.element {
		/* ~ tab・sp時のスタイル ~ */
	}

mediaquery 大量に生成するじゃねーかクソがって話のときはこうすればいいんじゃないですかね

+pc()
	.element
		// ~ pc時のスタイル ~
	// …以下続く
+sp()
	.element
		// ~ tab・sp時のスタイル ~
	// …以下続く

メリット

reset.css

管理というか他人の褌拝借しているだけですが、以下ソースを参考に使ってます。

https://github.com/tj/nib/blob/master/lib/nib/reset.styl

global-reset()
  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,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td
    reset-box-model()
    reset-font()

reset-box-model()
  margin: 0
  padding: 0
  border: 0
  outline: 0

reset-font()
  font-weight: inherit
  font-style: inherit
  font-family: inherit
  font-size: 100%
  vertical-align: baseline

上記のように変数で登録して使用する箇所のみ呼び出すみたいな感じです。

自分はreset()を作成してその下に必要なのを拝借するみたいな感じ

reset()
	global-reset()
	reset-html5()

自分は clearfix 用も追加したりしてます(内容が古いので後で更新する…)

clearfix()
	.clearfix:before
	.clearfix:after
	.row:before
	.row:after
		content: ""
		display: table
	.clearfix:after
	.row:after
		clear: both

後は書出したいところに呼び出す感じです。

@import 'reset' reset();

メリット

こちらからは以上です。

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
アーカイブ一覧へ戻る