面试必问的8个CSS响应式单元，你知道几个？
时间：2023-03-28 17:57:35
HTML
澶у濂斤紝鎴戞槸鍗婂馃懘锛屼竴涓垰鍒氬紑濮嬪啓浣滅殑娌欓洉绋嬪簭鍛樸€傚枩娆㈡垜鐨勬枃绔犲彲浠ュ叧娉ㄢ灂鐐硅禐馃憤鍔犳垜寰俊锛歠rontendpicker锛屾垜浠竴璧峰涔犱氦娴侊紝鎴愪负鏇村ソ鐨勫伐绋嬪笀~鍏虫敞鍏紬鍙凤細鎼炲墠绔崐澶忥紝瀛︽洿澶氬墠绔?缁堢粨鐭ヨ瘑锛佺偣鎴戞帰绱㈡柊涓栫晫锛佸師鏂囬摼鎺?=>http://sylblog.xin/archives/51鍓嶈█浠婂ぉ锛屾垜浠敓娲诲湪鎵嬫満鐨勪笘鐣岄噷銆傛湁閭ｄ箞澶氬睆骞曠殑鎵嬫満閭ｄ箞澶氥€傚睆骞曞昂瀵镐粠2.4鑻卞鍙樻垚浜?.5鑻卞銆?.0鑻卞銆?.0鑻卞绛夌瓑锛岀幇鍦ㄥ熀鏈兘鏄?.0鑻卞璧锋銆俥m鏄浉瀵逛簬鐖跺瓧浣撳ぇ灏忕殑銆傛瘮濡備綘缁欎竴涓厓绱犺缃簡font-size:2em锛岄偅涔堣繖閲岄粯璁ょ殑瀛椾綋澶у皬鍏跺疄灏辨槸缁ф壙鐖剁骇鐨勫瓧浣撳ぇ灏忥紝font-size:2em琛ㄧず褰撳墠鍏冪礌鐨勫瓧浣撳ぇ灏忔槸鐖剁骇鐨勪袱鍊?鎵惧埌body涓嬮潰em鐨刾x鍊納font-size:2em;}p{font-size:2em;width:2em;
em
000000
rem鍏冪礌锛坔tml鑺傜偣锛夈€傛瘮濡傜粰涓€涓厓绱犺缃畐idth:2rem锛岃〃绀鸿鍏冪礌鐨勫搴︽槸html鑺傜偣鐨刦ont-size鐨?鍊嶃€傚鏋滃湪html涓病鏈夎缃甪ont-size锛屽垯榛樿涓?6px銆傛敞鎰忥紒锛欳hrome榛樿鏈€灏忓瓧浣撳ぇ灏忎负12px锛屽皬浜?2px鐨勫瓧浣撲細鏄剧ず12px鐨勫ぇ灏忋€備絾鎮ㄥ彲浠ュ湪Chrome娴忚鍣ㄧ殑璁剧疆涓繘琛屼慨鏀广€傜ず渚媓tml{font-size:10px;}body{font-size:18px;}h1{font-size:1rem;}杩欓噷h1鐨勫瓧浣撳ぇ灏忎负10px锛涘槾锛烳DN瑙嗗彛锛坴iewport锛夎〃绀哄綋鍓嶅彲瑙佺殑璁＄畻鏈哄浘褰㈠尯鍩熴€傚湪Web娴忚鍣ㄦ湳璇腑锛岄€氬父涓庢祻瑙堝櫒绐楀彛鐩稿悓锛屼絾涓嶅寘鎷祻瑙堝櫒鐨刄I銆佽彍鍗曟爮绛?鎮ㄦ鍦ㄦ煡鐪嬬殑鏂囨。閮ㄥ垎銆俉eb娴忚鍣ㄥ寘鍚袱涓鍙ｏ紝甯冨眬瑙嗗彛鍜岃瑙夎鍙ｃ€傚彲瑙嗚鍙ｆ槸鎸囧湪褰撳墠娴忚鍣ㄤ腑鍙鐨勩€佸彲浠ユ敼鍙樼殑閮ㄥ垎銆傚綋浣跨敤瑙︽懜灞忓弻鎸囩缉鏀炬椂锛屽綋鎵嬫満涓婂脊鍑哄姩鎬侀敭鐩樻椂锛屾垨鑰呭綋涔嬪墠闅愯棌鐨勫湴鍧€鏍忓彉涓哄彲瑙佹椂锛岃瑙夎鍙ｇ缉灏忥紝浣嗗竷灞€瑙嗗彛淇濇寔涓嶅彉銆傝鍙ｅ崟鍏冧腑鐨勨€滆鍙ｂ€濇寚鐨勬槸甯冨眬瑙嗗彛锛屽嵆window.innerWidth/window.innerHeight鐨勫ぇ灏忋€倂w瀹冩槸鐩稿浜庤鍙ｅ搴︾殑1%銆傚亣璁捐鍙ｅ搴︿负1290px锛岄偅涔?0vw灏辨槸129px銆備粠涓嬮潰鐨勫姩鍥惧彲浠ョ湅鍑猴紝褰撲綘鎷栧姩娴忚鍣ㄧ殑瀹藉害鏃讹紝瀛椾綋澶у皬浼氬彂鐢熷彉鍖栵紝鑰屽綋浣犳嫋鍔ㄦ祻瑙堝櫒鐨勯珮搴︽椂锛屽瓧浣撳ぇ灏忎笉浼氭敼鍙樸€俒澶栭摼杞浘...(img-9HUGYoYQ-1652753204138)]vh1vw绛変簬瑙嗗彛瀹藉害鐨?%銆備粠涓嬮潰鐨勫姩鍥惧彲浠ョ湅鍑猴紝褰撲綘鎷栧姩娴忚鍣ㄧ殑楂樺害鏃讹紝瀛椾綋澶у皬浼氬彂鐢熷彉鍖栵紝浣嗘槸褰撲綘鎷栧姩瀹藉害鏃讹紝瀛椾綋澶у皬涓嶄細鏀瑰彉銆倂minvmin浠ｈ〃瑙嗗彛瀹藉拰楂樼殑杈冨皬鍊硷紝鍗硋w鍜寁h鐨勮緝灏忓€笺€傚鏋滆鍙ｅ搴﹀ぇ浜庡叾楂樺害锛屽垯璇ュ€煎皢浠庨珮搴﹁绠椼€備粠涓嬮潰鐨勫姩鍥惧彲浠ョ湅鍑猴細褰撴祻瑙堝櫒鐨勫搴﹀ぇ浜庨珮搴︽椂锛屾嫋鍔ㄥ搴︼紝瀛椾綋澶у皬涓嶅彉锛涙嫋鍔ㄩ珮搴︼紝瀛椾綋鍙樺寲銆傚綋娴忚鍣ㄩ珮搴﹀ぇ浜庡搴︽椂锛屾嫋鍔ㄩ珮搴︼紝瀛椾綋澶у皬涓嶅彉锛涙嫋鍔ㄥ搴︼紝瀛椾綋鏀瑰彉銆倂max涓巚min%姝ｅソ鐩稿弽锛寁min鏄浉瀵逛簬鐖跺厓绱犵殑銆?瀵逛簬涓嶅悓鐨勫睘鎬ф湁涓嶅悓鐨勫惈涔夛細渚嬪锛歠ont-size:200%涓巉ont-size:2em鐩稿悓锛岃〃绀哄瓧浣撳ぇ灏忔槸榛樿锛堢户鎵胯嚜parent锛夊瓧浣撳ぇ灏忕殑涓ゅ€嶃€備緥濡傦細line-height:200%琛ㄧず琛岄珮鏄瓧鍙风殑涓ゅ€嶃€備緥濡傦細width:100%琛ㄧず鑷韩鍐呭鐨勫搴︾瓑浜庣埗鍐呭瀹藉害鐨?鍊嶃€?/p>
