Privateスマートフォンデザインルール

スマートフォン

margin

 状態:-  閲覧数:1,728  投稿日:2017-11-29  更新日:2017-11-29
一番外側の左右marginは0
・メディアクエリで変更
@media screen and (min-width:0rem) and (max-width:34rem) { /* 画面サイズ 0rem以上34rem未満 */
   .sorted_table__block{
       margin: 1rem 0 2rem 0;
   }
}



モバイル フレンドリー テスト / viewport設定

PHPでスマホ振り分けを検討



週間人気ページランキング / 12-17 → 12-23
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 109
2 鉄道会社毎のカラーコード | カラーコード(色) 6
3 RGB → HSL を 色モデルで考える | 色変換(色) 5
4 Chromeをインストール出来ない | Google Chrome(ブラウザ) 4
5 タグの"submit"属性の見た目を、CSSで変更しようとしてハマる | フォーム(CSS) 3
5 Design 0 3
5 Material Design 2014 年 | Material Design(色) 3
5 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 3
5 RGB ⇔ Lab | 色変換(色) 3
5 色モデルイメージ図 | 色変換(色) 3
6 アカウント作成 2
6 効果を打ち消すスタイルシート | CSS 2
6 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 2
6 「bgcolor」「background-color」「background」の違い | CSS 2
6 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 2
6 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 2
6 アイコンを「Font Awesome」から変更。→「自分で探したSVG」を「自分のserver」へアップロード | アイコン(デザイン) 2
6 JavaScript in Bootstrap | 2系(Bootstrap) 2
6 「レイヤー」+「レイヤー効果」をコピーして新規psdにペースト | Photoshop 2
6 デザイン変更 | Webデザイン(デザイン) 2
2025/12/24 1:01 更新