応答型レイアウトに関連し、内容は菜鳥チュートリアルに由来します.

viewport

width:viewportのサイズを制御し、600などの値を指定したり、device-widthがデバイスの幅(100%スケールのCSSの画素単位)などの特殊な値を指定したりすることができます.
height:widthに対応して、高さを指定します.initial-scale:初期スケール、すなわちページが初めてloadされたときにスケールをスケールします.maximum-scale:ユーザーが縮小できる最大の割合.minimum-scale:ユーザーが縮小できる最小割合.user-scalable:ユーザーが手動でスケールできるかどうか.

レスポンスグリッドビュー

まず、すべてのHTML要素にbox-sizingプロパティがあり、border-boxに設定されていることを確認します.要素の幅と高さの間に余白と枠線が含まれていることを確認します.次のコードを追加します:*{box-sizing:border-box;}応答型グリッドビューは通常12列で、幅は100%で、ブラウザウィンドウのサイズ調整時に自動的に伸縮します.グリッドビューを使用すると、Webページの設計に役立ちます.これにより、Webページに要素を追加することが簡単になります.各カラムの割合:100%/12カラム=8.33%を計算します.

@mediaメディアクエリー

移動端優先は、デフォルトでは移動端cssスタイルが使用され、そうでなければpc端などが使用されます.次の例は、モバイル端末の優先設計です.

	
	 
	 
	
	
    


	

		
menu    
	

	

		

			

				
  
				
  
				
  
			
		
	
		

			
  
			
Chania is the capital of the Chania regionrete. The city can be divided in two parts, the old town and the modern city.
		
		

			

				
What?
				
Chania is a city on the island of Crete.
				
Where?
				
Crete is a Greek island in the Mediterranean Sea.
			
		
	

	

		
。。。
	
 	
		 let menu = document.getElementsByClassName('menu')[0];
		 let currSty = window.getComputedStyle(menu,null);
		 document.querySelector('.header h1').onclick = function(){
			 console.log(currSty.display)
			 if(currSty.display == 'block'){
				 menu.style.cssText = 'display:none;'
			 }else{
				 menu.style.cssText = 'display:block'
			 }
		 }
	 

方向:横/縦

CSSメディアクエリーと組み合わせて、異なるデバイスの方向(横スクリーンlandscape、縦スクリーンportraitなど)に適したレイアウトを作成できます.構文:orientation:portrait|landscape portrait:出力デバイスのページ表示領域の高さが幅より大きいか等しいかを指定するlandscape:portrait値の場合を除きlandscape

	
	 
	 
	


	
       ，           ，        。      。