サイトを作る

それは最初から様々な画面サイズのためのデザインとスタイルの方が簡単ですが、時には我々が開始した後に我々のプロジェクトに柔軟性を追加する必要性を実現します.あなたが遡及的に既存のアプリケーションに反応性を追加している場合は、適切な場所に来ている.

背景:
ブートキャンププログラムのコードを学ぶ利点がたくさんあります.プロジェクトに焦点を当てたプログラムは、私が学んでいたものを固めるために、私にとって素晴らしかったです.私は、データベース、CRUDバックエンド、Jamstackアプリケーション、および現代のWebフレームワークを4日間のプロジェクトのスプリントで構築し、週の終わりに私の同級生にこれらのプロジェクトを発表した.
元のグラフィックデザイナーとして、私はいつも私のプロジェクトの基本的なWired、色、タイポグラフィを計画し、実装するために時間を作った.しかし、私はBootcampの間、私のプロジェクトのうちのどんなプロジェクトの中ででも反応するデザインを学ぶか、実行する時間が決してありませんでした.
私はまだそれらのいくつかを展開することを望んでいたので、応答するWebデザインを学習し、それを既存のプロジェクトに追加すると、卒業後にしたいことだった.結局、サイトの大部分は、彼らがデスクトップからするより、モバイル機器からより多くのトラフィックを得ます.

ときに応答性を追加する.

1 .ブレークを見つける
いくつかの時間をあなたのブラウザのウィンドウのサイズをいじると、最も作業を必要とするコンポーネントのリストを作成します.また、タブレットとモバイルを含むキーブレークポイントにブラウザをスナップするためにクロム開発者ツールを使用することができます.絶対に配置されたアイテムは非常に仕事をするのは難しいし、控えめに使用する必要があります.

2 . CSSの代わりにSASSまたはSCSSファイルを使う
変数とミックスを使用すると、より多くの組織と読みやすいスタイルシートになります.変数も簡単にあなたの全体のスタイルシートを更新する1つの編集をすることができます.

CSS Unitsを絶対から相対に変換する
任意の絶対的な長さの単位(px、pt、pc、in)を相対的な長さ単位(em、vh、vw、%)に置き換えます.これは自動的にアプリケーションをはるかに柔軟になります.

メディアクエリの使用
最初に最もgringスケーリングの問題を修正し、詳細にあなたの方法を作業を開始します.SASS変数を使用してブレークポイントを設定し、@media (max-width: 600px)や@media (max-width: $phone)などのメディアクエリを使用します.

撓み項目
デスクトップ版で折り重なっている項目はめったにモバイル上の水平空間を持っています.自分がよく書いているのを見つけたメディアの問合せは、

.text-container
     display: flex
     @media (max-width: 600px)
          flex-direction: column

// also written like:
.text-container
     @media (min-width: 600px)
          display: flex

6 .画像
画像は、画面のサイズを縮小縮小することができます.あなたのイメージをdivの中に置くことによって、あなたは操作するのがより簡単であるdivにイメージにフィットすることができます.イメージに合う2つの方法があります.

.image-container
     .image
          object-fit: contain
//or
.image-container
     .image
          max-width: 100%

読書ありがとう!
任意のコメントや提案がある場合は、[email protected]で私にメールしてください.