鍝嶅簲寮忓竷灞€

Posted 2020-12-24

鏍囩锛?a href='http://www.mamicode.com/so/1/%e7%ad%89%e7%ad%89' title='绛夌瓑'>绛夌瓑   png   css   phone   鍦版柟   瀹炵幇   span   you   宸ヤ綔   

鍦ㄥ紑鍙戠殑杩囩▼涓紝鍝嶅簲寮忕殑缃戠珯鏄洰鍓嶅緢甯哥敤鐨勫竷灞€鏂瑰紡锛屽彲浠ュ湪pc绔?nbsp;pad绔互鍙婃墜鏈虹璁剧疆鍚勮嚜鐨勬牱寮忥紝寰堝ソ鐨勬彁鍗囦簡鐢ㄦ埛鐨勪綋楠岋紝鎺ヤ笅鏉ュ崥涓诲氨浠ヨ嚜宸辩殑缁忛獙瀵瑰搷搴斿紡甯冨眬鐨勭煡璇嗙偣杩涜鎬荤粨銆?/div>

1銆佷粈涔堟槸鍝嶅簲寮忓竷灞€

       鍝嶅簲寮忕綉椤佃璁″氨鏄竴涓綉绔欒兘澶熷吋瀹瑰涓粓绔?鑰屼笉鏄负姣忎釜缁堢鍋氫竴涓壒瀹氱殑鐗堟湰銆傛墦涓瘮鏂规潵璇达細鐜板湪绀句細鏈夊緢澶氬搷搴斾骇鍝侊紝渚嬪鎶樺彔娌欏彂锛屾姌鍙犲簥绛夌瓑锛屽綋鎴戜滑闇€瑕佹妸娌欏彂鏀惧埌涓€涓钀界殑鏃跺€欙紝姝ゅ埢娌欏彂灏卞ソ姣攄iv鍚э紝鑰岃钀介噷鐨勬煇涓湴鏂瑰氨濂芥瘮鐖跺厓绱狅紝鐢变簬鐖跺厓绱犵┖闂寸殑鏀瑰彉锛屾垜浠笉寰椾笉璋冩暣div,璁╁畠鑳藉渚濈劧鏀惧湪瑙掕惤閲屻€傚湪椤圭洰涓綘浼氶亣鍒颁笉鍚岀殑缁堢锛岀敱浜庣粓绔垎杈ㄧ巼涓嶅悓锛屾墍浠ヤ綘瑕佹兂璁╃敤鎴蜂綋楠屾洿濂斤紝灏卞繀瑕佽浣犵殑椤甸潰鑳藉鍏煎澶氫釜缁堢銆?/span>

2銆佷笁澶ф妧鏈垚鍒?/span>

1. flexible grid layout 寮规€х綉鏍煎竷灞€
2. flexible image 寮规€у浘鐗?/span>
3. media queries 濯掍綋鏌ヨ

3銆佷紭鐐?/span>

• 鍑忓皯宸ヤ綔閲?/span>

                  缃戠珯銆佽璁°€佷唬鐮併€佸唴瀹归兘鍙渶瑕佷竴浠?/span>

                  澶氬嚭鏉ョ殑宸ヤ綔閲忓彧鏄疛S鑴氭湰銆乧ss鏍峰紡鍋氫竴浜涙敼鍔?/span>

• 鑺傜渷鏃堕棿
• 姣忎釜璁惧閮借兘寰楀埌姝ｇ‘鐨勮璁?/span>
• 鎼滅储浼樺寲

4銆佺己鐐?/div>

• 浼氬姞杞芥洿澶氱殑鏍峰紡鍜岃剼鏈祫婧?/div>
• 璁捐姣旇緝闅剧簿纭畾浣嶅拰鎺у埗
• 鑰佺増鏈祻瑙堝櫒鍏煎涓嶅ソ

5銆佸竷灞€鍙婅缃甿eta鏍囩

褰撳垱寤轰竴涓搷搴斿紡缃戠珯锛屾垨鑰呴潪鍝嶅簲寮忕綉绔欏彉鎴愬搷搴斿紡鐨勬椂鍊欙紝棣栧厛瑕佸叧娉ㄥ厓绱犵殑甯冨眬銆傛垜鍦ㄥ垱寤哄搷搴斿紡甯冨眬鐨勬椂鍊欎範鎯厛鍐欓潪鍝嶅簲寮忓竷灞€锛岄〉闈㈠浐瀹氬搴﹀ぇ灏忥紝鎴戣寰楄繖涓鍦ㄥ骇鐨勫悇浣嶆病鏈変换浣曢毦搴︺€傚鏋滃畬鎴愪簡闈炲搷搴斿紡閭ｄ箞鎴戝湪鍘绘坊鍔犲獟浣撴煡璇紙Media Query)鍜屽搷搴斿紡浠ｇ爜銆傝繖绉嶆搷浣滄洿瀹规槗瀹炵幇鍝嶅簲寮忕壒鎬с€?/span>

褰撲綘瀹屾垚褰撲綘宸茬粡瀹屾垚浜嗘棤鍝嶅簲鐨勭綉绔欙紝鍋氱殑绗竴浠朵簨鏄湪浣犵殑 HTML 椤甸潰锛岀矘璐翠笅闈㈢殑浠ｇ爜鍒板拰鏍囩涔嬮棿銆傝繖灏嗚缃睆骞曟寜1锛?鐨勫昂瀵告樉绀猴紝鍦?iPhone 鍜屽叾浠栨櫤鑳芥墜鏈虹殑娴忚鍣ㄦ彁渚涚綉绔欏叏瑙嗗浘娴忚锛屽苟绂佹鐢ㄦ埛缂╂斁椤甸潰銆?/span>

6銆佸獟浣撴煡璇?http://www.runoob.com/cssref/css3-pr-mediaquery.html)

浣跨敤 @media 鏌ヨ锛屼綘鍙互閽堝涓嶅悓鐨勫獟浣撶被鍨嬪畾涔変笉鍚岀殑鏍峰紡銆侤media 鍙互閽堝涓嶅悓鐨勫睆骞曞昂瀵歌缃笉鍚岀殑鏍峰紡锛岀壒鍒槸濡傛灉浣犻渶瑕佽缃璁″搷搴斿紡鐨勯〉闈紝@media 鏄潪甯告湁鐢ㄧ殑銆傚綋浣犻噸缃祻瑙堝櫒澶у皬鐨勮繃绋嬩腑锛岄〉闈篃浼氭牴鎹祻瑙堝櫒鐨勫搴﹀拰楂樺害閲嶆柊娓叉煋椤甸潰銆?/div>

css璇硶

渚嬪瓙锛?/div>