1 line
24 KiB
JavaScript
1 line
24 KiB
JavaScript
"use strict";(self.webpackChunkjjbook=self.webpackChunkjjbook||[]).push([[7802],{3905:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return d}});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var o=r.createContext({}),s=function(e){var t=r.useContext(o),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return r.createElement(o.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},c=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,u=p(e,["components","mdxType","originalType","parentName"]),c=s(n),d=a,k=c["".concat(o,".").concat(d)]||c[d]||m[d]||i;return n?r.createElement(k,l(l({ref:t},u),{},{components:n})):r.createElement(k,l({ref:t},u))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,l=new Array(i);l[0]=c;var p={};for(var o in t)hasOwnProperty.call(t,o)&&(p[o]=t[o]);p.originalType=e,p.mdxType="string"==typeof e?e:a,l[1]=p;for(var s=2;s<i;s++)l[s]=n[s];return r.createElement.apply(null,l)}return r.createElement.apply(null,n)}c.displayName="MDXCreateElement"},7851:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return p},contentTitle:function(){return o},metadata:function(){return s},toc:function(){return u},default:function(){return c}});var r=n(7462),a=n(3366),i=(n(7294),n(3905)),l=["components"],p={sidebar_label:"\u6837\u5f0f\uff1a\u79fb\u52a8\u7aef\u81ea\u9002\u5e94\u7684\u5e38\u89c1\u624b\u6bb5",sidebar_position:8},o="\u79fb\u52a8\u7aef\u81ea\u9002\u5e94\u7684\u5e38\u89c1\u624b\u6bb5",s={unversionedId:"book3/css-mobile-adaptive",id:"book3/css-mobile-adaptive",isDocsHomePage:!1,title:"\u79fb\u52a8\u7aef\u81ea\u9002\u5e94\u7684\u5e38\u89c1\u624b\u6bb5",description:"\u76f8\u5173\u95ee\u9898",source:"@site/docs/book3/css-mobile-adaptive.md",sourceDirName:"book3",slug:"/book3/css-mobile-adaptive",permalink:"/awesome-interview/book3/css-mobile-adaptive",tags:[],version:"current",sidebarPosition:8,frontMatter:{sidebar_label:"\u6837\u5f0f\uff1a\u79fb\u52a8\u7aef\u81ea\u9002\u5e94\u7684\u5e38\u89c1\u624b\u6bb5",sidebar_position:8},sidebar:"tutorialSidebar",previous:{title:"\u57fa\u7840\uff1aTypeScript \u4e2d\u7684 Interface \u548c Type Alias",permalink:"/awesome-interview/book3/js-ts-interface-type"},next:{title:"\u7f51\u7edc\uff1aHTTP2 \u548c HTTP1.1 \u7684\u5bf9\u6bd4",permalink:"/awesome-interview/book3/network-http-1-2"}},u=[{value:"\u76f8\u5173\u95ee\u9898",id:"\u76f8\u5173\u95ee\u9898",children:[]},{value:"\u56de\u7b54\u5173\u952e\u70b9",id:"\u56de\u7b54\u5173\u952e\u70b9",children:[]},{value:"\u77e5\u8bc6\u70b9\u6df1\u5165",id:"\u77e5\u8bc6\u70b9\u6df1\u5165",children:[{value:"1. \u76f8\u5173\u6982\u5ff5",id:"1-\u76f8\u5173\u6982\u5ff5",children:[]},{value:"2. \u4f7f\u7528 viewport \u5143\u6807\u7b7e\u914d\u7f6e\u89c6\u53e3",id:"2-\u4f7f\u7528-viewport-\u5143\u6807\u7b7e\u914d\u7f6e\u89c6\u53e3",children:[]},{value:"3. \u4f7f\u7528\u73b0\u4ee3\u54cd\u5e94\u5f0f\u5e03\u5c40\u65b9\u6848",id:"3-\u4f7f\u7528\u73b0\u4ee3\u54cd\u5e94\u5f0f\u5e03\u5c40\u65b9\u6848",children:[]},{value:"4. \u4f7f\u7528\u5a92\u4f53\u67e5\u8be2\uff08Media Queries\uff09",id:"4-\u4f7f\u7528\u5a92\u4f53\u67e5\u8be2media-queries",children:[]},{value:"5. \u4f7f\u7528\u76f8\u5bf9\u5355\u4f4d",id:"5-\u4f7f\u7528\u76f8\u5bf9\u5355\u4f4d",children:[]},{value:"6. \u4f7f\u7528\u54cd\u5e94\u5f0f\u56fe\u7247",id:"6-\u4f7f\u7528\u54cd\u5e94\u5f0f\u56fe\u7247",children:[]},{value:"7. \u9002\u914d\u5b89\u5168\u533a\u57df",id:"7-\u9002\u914d\u5b89\u5168\u533a\u57df",children:[]}]},{value:"\u53c2\u8003\u8d44\u6599",id:"\u53c2\u8003\u8d44\u6599",children:[]}],m={toc:u};function c(e){var t=e.components,n=(0,a.Z)(e,l);return(0,i.kt)("wrapper",(0,r.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"\u79fb\u52a8\u7aef\u81ea\u9002\u5e94\u7684\u5e38\u89c1\u624b\u6bb5"},"\u79fb\u52a8\u7aef\u81ea\u9002\u5e94\u7684\u5e38\u89c1\u624b\u6bb5"),(0,i.kt)("h2",{id:"\u76f8\u5173\u95ee\u9898"},"\u76f8\u5173\u95ee\u9898"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"\u4ecb\u7ecd meta \u7684 viewport \u503c"),(0,i.kt)("li",{parentName:"ul"},"rem \u548c vw \u7684\u503c\u662f\u6839\u636e\u4ec0\u4e48\u8ba1\u7b97\u7684"),(0,i.kt)("li",{parentName:"ul"},"1px \u663e\u793a\u95ee\u9898"),(0,i.kt)("li",{parentName:"ul"},"\u5982\u4f55\u9002\u914d\u5218\u6d77\u5c4f")),(0,i.kt)("h2",{id:"\u56de\u7b54\u5173\u952e\u70b9"},"\u56de\u7b54\u5173\u952e\u70b9"),(0,i.kt)("p",null,(0,i.kt)("inlineCode",{parentName:"p"},"viewport")," ",(0,i.kt)("inlineCode",{parentName:"p"},"\u76f8\u5bf9\u5355\u4f4d")," ",(0,i.kt)("inlineCode",{parentName:"p"},"\u5a92\u4f53\u67e5\u8be2")," ",(0,i.kt)("inlineCode",{parentName:"p"},"\u54cd\u5e94\u5f0f\u56fe\u7247")),(0,i.kt)("p",null,"\u79fb\u52a8\u7aef\u5f00\u53d1\u7684\u4e3b\u8981\u75db\u70b9\u662f\u5982\u4f55\u8ba9\u9875\u9762\u9002\u914d\u5404\u79cd\u4e0d\u540c\u7684\u7ec8\u7aef\u8bbe\u5907\uff0c\u4f7f\u4e0d\u540c\u7684\u7ec8\u7aef\u8bbe\u5907\u90fd\u62e5\u6709\u57fa\u672c\u4e00\u81f4\u7684\u89c6\u89c9\u6548\u679c\u548c\u4ea4\u4e92\u4f53\u9a8c\u3002\u79fb\u52a8\u7aef\u5e38\u89c1\u7684\u9002\u914d\u65b9\u6848\u6709\u4ee5\u4e0b\u51e0\u79cd\uff0c\u4e00\u822c\u90fd\u662f\u4e92\u76f8\u642d\u914d\u4f7f\u7528\u3002\u5305\u62ec\uff1a"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"\u89c6\u53e3\u5143\u4fe1\u606f\u914d\u7f6e"),(0,i.kt)("li",{parentName:"ul"},"\u54cd\u5e94\u5f0f\u5e03\u5c40"),(0,i.kt)("li",{parentName:"ul"},"\u76f8\u5bf9\u5355\u4f4d"),(0,i.kt)("li",{parentName:"ul"},"\u5a92\u4f53\u67e5\u8be2"),(0,i.kt)("li",{parentName:"ul"},"\u54cd\u5e94\u5f0f\u56fe\u7247"),(0,i.kt)("li",{parentName:"ul"},"\u5b89\u5168\u533a\u57df\u9002\u914d")),(0,i.kt)("h2",{id:"\u77e5\u8bc6\u70b9\u6df1\u5165"},"\u77e5\u8bc6\u70b9\u6df1\u5165"),(0,i.kt)("h3",{id:"1-\u76f8\u5173\u6982\u5ff5"},"1. \u76f8\u5173\u6982\u5ff5"),(0,i.kt)("h4",{id:"11-\u50cf\u7d20"},"1.1 \u50cf\u7d20"),(0,i.kt)("p",null,(0,i.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/17002181/129163975-62428afd-e028-4f7f-a676-10781905e37e.png",alt:"image"})),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"\u5206\u8fa8\u7387\uff08Resolution\uff09")),(0,i.kt)("p",null,"\u5206\u8fa8\u7387\u662f\u6307\u4f4d\u56fe\u56fe\u50cf\u4e2d\u7ec6\u8282\u7684\u7cbe\u7ec6\u7a0b\u5ea6\uff0c\u4ee5\u6bcf\u82f1\u5bf8\u50cf\u7d20\uff08ppi\uff09\u8861\u91cf\u3002\u6bcf\u82f1\u5bf8\u7684\u50cf\u7d20\u8d8a\u591a\uff0c\u5206\u8fa8\u7387\u5c31\u8d8a\u9ad8\u3002"),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"\u7269\u7406\u50cf\u7d20\uff08Physical pixels\uff09")),(0,i.kt)("p",null,"\u7269\u7406\u50cf\u7d20\u662f\u4e00\u4e2a\u8bbe\u5907\u7684\u5b9e\u9645\u50cf\u7d20\u6570\u3002"),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"\u903b\u8f91\u50cf\u7d20\uff08Logical pixels\uff09")),(0,i.kt)("p",null,"\u662f\u4e00\u79cd\u62bd\u8c61\u6982\u5ff5\u3002\u5728\u4e0d\u540c\u7684\u8bbe\u5907\u4e0b\uff0c\u4e00\u4e2a\u903b\u8f91\u50cf\u7d20\u4ee3\u8868\u7684\u7269\u7406\u50cf\u7d20\u6570\u4e0d\u540c\u3002CSS \u50cf\u7d20\u662f\u903b\u8f91\u50cf\u7d20\u3002"),(0,i.kt)("p",null,"\u4e3a\u4e86\u5728\u4e0d\u540c\u5c3a\u5bf8\u548c\u5bc6\u5ea6\u6bd4\u7684\u8bbe\u5907\u4e0a\u8868\u73b0\u51fa\u4e00\u81f4\u7684\u89c6\u89c9\u6548\u679c\uff0c\u4f7f\u7528\u903b\u8f91\u50cf\u7d20\u63cf\u8ff0\u4e00\u4e2a\u76f8\u540c\u5c3a\u5bf8\u7684\u7269\u7406\u5355\u4f4d\u3002\u5728\u5177\u6709\u9ad8\u5bc6\u5ea6\u6bd4\u7684\u5c4f\u5e55\u4e0b\uff0c\u4e00\u4e2a\u903b\u8f91\u50cf\u7d20\u5bf9\u5e94\u591a\u4e2a\u7269\u7406\u50cf\u7d20\u3002"),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"\u8bbe\u5907\u50cf\u7d20\u6bd4\uff08Device Pixel Ratio\uff09")),(0,i.kt)("p",null,"\u5f53\u524d\u663e\u793a\u8bbe\u5907\u7684\u7269\u7406\u50cf\u7d20\u5206\u8fa8\u7387\u4e0e CSS \u50cf\u7d20\u5206\u8fa8\u7387\u4e4b\u6bd4\u3002"),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"\u76f8\u5173\u95ee\u9898\uff1a\u56fe\u7247\u6216 1px \u8fb9\u6846\u663e\u793a\u6a21\u7cca")),(0,i.kt)("p",null,"\u5728\u79fb\u52a8\u7aef\u4e2d\uff0c\u5e38\u89c1\u56fe\u7247\u6216\u8005 1px \u7684\u8fb9\u6846\u5728\u4e00\u4e9b\u673a\u578b\u4e0b\u663e\u793a\u6a21\u7cca/\u53d8\u7c97\u7684\u95ee\u9898\u3002\u57fa\u4e8e\u5bf9\u50cf\u7d20\u76f8\u5173\u7684\u6982\u5ff5\u7406\u89e3\uff0c\u53ef\u77e5 CSS \u4e2d\u7684 1px \u662f\u6307\u4e00\u4e2a\u5355\u4f4d\u7684\u903b\u8f91\u50cf\u7d20\u3002\u4e00\u4e2a\u5355\u4f4d\u7684\u903b\u8f91\u50cf\u7d20\u6620\u5c04\u5230\u4e0d\u540c\u50cf\u7d20\u5bc6\u5ea6\u6bd4\u7684\u8bbe\u5907\u4e0b\uff0c\u5b9e\u9645\u5bf9\u5e94\u7684\u7269\u7406\u50cf\u7d20\u4e0d\u540c\u3002"),(0,i.kt)("p",null,"\u56e0\u6b64\uff0c\u540c\u6837\u5c3a\u5bf8\u7684\u56fe\u7247\u5728\u9ad8\u5bc6\u5ea6\u6bd4\u7684\u8bbe\u5907\u4e0b\uff0c\u7531\u4e8e\u4e00\u4e2a\u4f4d\u56fe\u50cf\u7d20\u9700\u8981\u5e94\u7528\u5230\u591a\u4e2a\u7269\u7406\u50cf\u7d20\u4e0a\uff0c\u6240\u4ee5\u4f1a\u6bd4\u4f4e\u5bc6\u5ea6\u6bd4\u8bbe\u5907\u4e2d\u7684\u89c6\u89c9\u6548\u679c\u6a21\u7cca\u3002"),(0,i.kt)("h4",{id:"12-\u89c6\u53e3"},"1.2 \u89c6\u53e3"),(0,i.kt)("p",null,(0,i.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/17002181/129689136-b9ab7dd0-1746-413a-afac-dbcd7d39b426.png",alt:"image"})),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"\u89c6\u53e3\uff08viewport\uff09")),(0,i.kt)("p",null,"\u89c6\u53e3\u4e00\u822c\u662f\u6307\u7528\u6237\u8bbf\u95ee\u9875\u9762\u65f6\uff0c\u5f53\u524d\u7684\u53ef\u89c6\u533a\u57df\u8303\u56f4\u3002\u901a\u8fc7\u6eda\u52a8\u6761\u6ed1\u52a8\uff0c\u89c6\u53e3\u53ef\u4ee5\u663e\u793a\u9875\u9762\u7684\u5176\u4ed6\u90e8\u5206\u3002\u5728 PC \u7aef\u4e0a\uff0c",(0,i.kt)("inlineCode",{parentName:"p"},"<html>")," \u5143\u7d20\u7684\u5bbd\u5ea6\u88ab\u8bbe\u7f6e\u4e3a 100% \u65f6\uff0c\u7b49\u540c\u4e8e\u89c6\u53e3\u5927\u5c0f\uff0c\u7b49\u540c\u4e8e\u6d4f\u89c8\u5668\u7684\u7a97\u53e3\u5927\u5c0f\u3002\u901a\u8fc7 ",(0,i.kt)("inlineCode",{parentName:"p"},"document.documentElement.clientWidth")," \u6216 ",(0,i.kt)("inlineCode",{parentName:"p"},"window.innerWidth")," \u53ef\u4ee5\u83b7\u53d6\u89c6\u53e3\u5bbd\u5ea6\u3002CSS \u5e03\u5c40\u57fa\u4e8e\u89c6\u53e3\u5927\u5c0f\u8fdb\u884c\u8ba1\u7b97\u3002"),(0,i.kt)("p",null,"\u7531\u4e8e\u79fb\u52a8\u8bbe\u5907\u5c3a\u5bf8\u8f83\u5c0f\uff0c\u5982\u679c\u57fa\u4e8e\u6d4f\u89c8\u5668\u7a97\u53e3\u5927\u5c0f\u7684\u89c6\u53e3\u8fdb\u884c\u5e03\u5c40\uff0c\u4f1a\u5bfc\u81f4\u4e00\u4e9b\u6ca1\u6709\u9002\u914d\u8fc7\u79fb\u52a8\u8bbe\u5907\u6837\u5f0f\u7684\u7ad9\u70b9\u5e03\u5c40\u9519\u4e71\uff0c\u7528\u6237\u4f53\u9a8c\u5dee\u3002\u4e3a\u4e86\u8ba9\u79fb\u52a8\u7aef\u4e5f\u80fd\u6b63\u5e38\u663e\u793a\u672a\u9002\u914d\u79fb\u52a8\u8bbe\u5907\u7684\u9875\u9762\uff0c\u4ece\u800c\u5f15\u5165\u5e03\u5c40\u89c6\u53e3\u548c\u89c6\u89c9\u89c6\u53e3\u7684\u6982\u5ff5\u3002"),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"\u5e03\u5c40\u89c6\u53e3\uff08layout viewport\uff09")),(0,i.kt)("p",null,"\u5e03\u5c40\u89c6\u53e3\u7684\u5bbd\u5ea6\u9ed8\u8ba4\u4e3a 980px\uff0c\u901a\u5e38\u6bd4\u7269\u7406\u5c4f\u5e55\u5bbd\u3002CSS \u5e03\u5c40\u4f1a\u57fa\u4e8e\u5e03\u5c40\u89c6\u53e3\u8fdb\u884c\u8ba1\u7b97\u3002\u79fb\u52a8\u8bbe\u5907\u7684\u6d4f\u89c8\u5668\u57fa\u4e8e\u865a\u62df\u7684\u5e03\u5c40\u89c6\u53e3\u53bb\u6e32\u67d3\u7f51\u9875\uff0c\u5e76\u5c06\u5bf9\u5e94\u7684\u6e32\u67d3\u7ed3\u679c\u7f29\u5c0f\u4ee5\u4fbf\u9002\u5e94\u8bbe\u5907\u5b9e\u9645\u5bbd\u5ea6\uff0c\u4ece\u800c\u53ef\u4ee5\u5b8c\u6574\u7684\u5c55\u793a\u7ad9\u70b9\u5185\u5bb9\u4e14\u4e0d\u7834\u574f\u5e03\u5c40\u7ed3\u6784\u3002"),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"\u89c6\u89c9\u89c6\u53e3\uff08visual viewport\uff09")),(0,i.kt)("p",null,"\u89c6\u89c9\u89c6\u53e3\u662f\u5e03\u5c40\u89c6\u53e3\u7684\u5f53\u524d\u53ef\u89c1\u90e8\u5206\u3002\u7528\u6237\u53ef\u4ee5\u901a\u8fc7\u7f29\u653e\u6765\u67e5\u770b\u9875\u9762\u5185\u5bb9\uff0c\u4ece\u800c\u6539\u53d8\u89c6\u89c9\u89c6\u53e3\uff0c\u4f46\u4e0d\u5f71\u54cd\u5e03\u5c40\u89c6\u53e3\u3002"),(0,i.kt)("h3",{id:"2-\u4f7f\u7528-viewport-\u5143\u6807\u7b7e\u914d\u7f6e\u89c6\u53e3"},"2. \u4f7f\u7528 viewport \u5143\u6807\u7b7e\u914d\u7f6e\u89c6\u53e3"),(0,i.kt)("p",null,"\u5f00\u53d1\u8005\u53ef\u4ee5\u901a\u8fc7 ",(0,i.kt)("inlineCode",{parentName:"p"},'<meta name="viewport">')," \u5bf9\u79fb\u52a8\u7aef\u7684\u5e03\u5c40\u89c6\u53e3\u8fdb\u884c\u8bbe\u7f6e\u3002\u5982\u679c\u4e0d\u8fdb\u884c viewport \u5143\u6807\u7b7e\u7684\u8bbe\u7f6e\uff0c\u53ef\u80fd\u4f1a\u5bfc\u81f4\u5f00\u53d1\u8005\u8bbe\u5b9a\u7684\u8f83\u5c0f\u5bbd\u5ea6\u7684\u5a92\u4f53\u67e5\u8be2\u6c38\u8fdc\u4e0d\u4f1a\u88ab\u4f7f\u7528\uff0c\u56e0\u4e3a\u9ed8\u8ba4\u7684\u5e03\u5c40\u89c6\u53e3\u5bbd\u5ea6\u4e3a 980px\u3002"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- width \u5c5e\u6027\u63a7\u5236\u89c6\u53e3\u7684\u5927\u5c0f\u3002device-width \u503c\u6307\u4ee3\u8bbe\u5907\u5c4f\u5e55\u5bbd\u5ea6\u3002 --\x3e\n\x3c!-- initial-scale \u5c5e\u6027\u63a7\u5236\u9875\u9762\u9996\u6b21\u52a0\u8f7d\u65f6\u7684\u7f29\u653e\u7ea7\u522b\u3002--\x3e\n<meta name="viewport" content="width=device-width, initial-scale=1.0" />\n')),(0,i.kt)("h3",{id:"3-\u4f7f\u7528\u73b0\u4ee3\u54cd\u5e94\u5f0f\u5e03\u5c40\u65b9\u6848"},"3. \u4f7f\u7528\u73b0\u4ee3\u54cd\u5e94\u5f0f\u5e03\u5c40\u65b9\u6848"),(0,i.kt)("p",null,"\u9664\u4e86\u4f7f\u7528\u6d6e\u52a8\u5e03\u5c40\u548c\u767e\u5206\u6bd4\u5e03\u5c40\u5916\uff0c\u76ee\u524d\u6bd4\u8f83\u5e38\u89c1\u7684\u662f\u4f7f\u7528 Flexbox \u6216 CSS Grid \u6765\u5b9e\u73b0\u7075\u6d3b\u7684\u7f51\u683c\u5e03\u5c40\u3002\u53ef\u4ee5\u6839\u636e\u4ee5\u4e0b\u6761\u4ef6\u6765\u9009\u62e9\u5e03\u5c40\u65b9\u6848\uff1a"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"\u9700\u8981\u4e00\u7ef4\u8fd8\u662f\u4e8c\u7ef4\u5e03\u5c40"),"\uff1aFlexbox \u57fa\u4e8e\u4e00\u6761\u4e3b\u8f74\u65b9\u5411\u8fdb\u884c\u5e03\u5c40\u3002CSS Grid \u53ef\u5212\u5206\u4e3a\u884c\u548c\u5217\u8fdb\u884c\u5e03\u5c40\u3002\u5982\u679c\u53ea\u9700\u8981\u6309\u7167\u884c\u6216\u5217\u8fdb\u884c\u5e03\u5c40\u5219\u4f7f\u7528 Flexbox\uff1b\u5982\u679c\u9700\u8981\u540c\u65f6\u6309\u7167\u884c\u548c\u5217\u63a7\u5236\u5e03\u5c40\u5219\u4f7f\u7528 CSS Grid\u3002")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"\u4e13\u6ce8\u5e03\u5c40\u7ed3\u6784\u8fd8\u662f\u5185\u5bb9\u6d41"),"\uff1aFlexbox \u4e13\u6ce8\u4e8e\u5185\u5bb9\u6d41\u3002Flex Item \u7684\u5bbd\u5ea6\u6216\u9ad8\u5ea6\u7531\u9879\u76ee\u4e2d\u7684\u5185\u5bb9\u51b3\u5b9a\u3002Flex Item \u6839\u636e\u5176\u5185\u90e8\u5185\u5bb9\u548c\u53ef\u7528\u7a7a\u95f4\u8fdb\u884c\u589e\u957f\u548c\u7f29\u5c0f\u3002CSS Grid \u4e13\u6ce8\u4e8e\u7cbe\u786e\u7684\u5185\u5bb9\u5e03\u5c40\u7ed3\u6784\u89c4\u5219\u3002\u6bcf\u4e2a Grid Item \u90fd\u662f\u4e00\u4e2a\u7f51\u683c\u5355\u5143\uff0c\u6cbf\u6c34\u5e73\u8f74\u548c\u5782\u76f4\u8f74\u6392\u5217\u3002\u5982\u679c\u5141\u8bb8\u5185\u5bb9\u7075\u6d3b\u7684\u5206\u914d\u7a7a\u95f4\u5219\u4f7f\u7528 Flexbox\uff1b\u5982\u679c\u9700\u8981\u51c6\u786e\u63a7\u5236\u5e03\u5c40\u4e2d\u9879\u76ee\u7684\u4f4d\u7f6e\u5219\u4f7f\u7528 CSS Grid\u3002"))),(0,i.kt)("p",null,(0,i.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/17002181/129393911-324a2f65-30c3-423d-9825-cc3b4d5e3d9e.png",alt:"image"})),(0,i.kt)("h3",{id:"4-\u4f7f\u7528\u5a92\u4f53\u67e5\u8be2media-queries"},"4. \u4f7f\u7528\u5a92\u4f53\u67e5\u8be2\uff08Media Queries\uff09"),(0,i.kt)("p",null,"\u5a92\u4f53\u67e5\u8be2\u5141\u8bb8\u5f00\u53d1\u8005\u6839\u636e\u8bbe\u5907\u7c7b\u578b\u548c\u7279\u5f81\uff08\u5982\u5c4f\u5e55\u5206\u8fa8\u7387\u6216\u6d4f\u89c8\u5668\u89c6\u53e3\u5bbd\u5ea6\uff09\u6765\u6309\u9700\u8bbe\u7f6e\u6837\u5f0f\u3002"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-css"},"/* \u5f53\u6d4f\u89c8\u5668\u5bbd\u5ea6\u81f3\u5c11\u5728 600px \u53ca\u4ee5\u4e0a\u65f6 */\n@media screen and (min-width: 600px) {\n .hzfe {\n /* \u5bf9 .hzfe \u5e94\u7528\u67d0\u4e9b\u6837\u5f0f */\n }\n}\n\n/* \u5f53\u8bbe\u5907 DPR \u4e3a2\u65f6\u7684\u6837\u5f0f */\n@media screen and (-webkit-min-device-pixel-ratio: 2) {\n .border-1 {\n border-width: 0.5px;\n }\n}\n")),(0,i.kt)("h3",{id:"5-\u4f7f\u7528\u76f8\u5bf9\u5355\u4f4d"},"5. \u4f7f\u7528\u76f8\u5bf9\u5355\u4f4d"),(0,i.kt)("p",null,"\u79fb\u52a8\u7aef\u5f00\u53d1\u9700\u8981\u9762\u5bf9\u5341\u5206\u7e41\u6742\u7684\u7ec8\u7aef\u8bbe\u5907\u5c3a\u5bf8\u3002\u9664\u4e86\u4f7f\u7528\u54cd\u5e94\u5f0f\u5e03\u5c40\u3001\u5a92\u4f53\u67e5\u8be2\u7b49\u65b9\u6848\u4e4b\u5916\uff0c\u5728\u5bf9\u5143\u7d20\u8fdb\u884c\u5e03\u5c40\u65f6\uff0c\u4e00\u822c\u4f1a\u4f7f\u7528\u76f8\u5bf9\u5355\u4f4d\u6765\u83b7\u5f97\u66f4\u591a\u7684\u7075\u6d3b\u6027\u3002"),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"rem")),(0,i.kt)("p",null,"\u6839\u636e W3C \u89c4\u8303\u53ef\u77e5\uff0c1rem \u7b49\u540c\u4e8e\u6839\u5143\u7d20 html \u7684 font-size \u5927\u5c0f\u3002"),(0,i.kt)("p",null,"\u7531\u4e8e\u65e9\u671f vw\u3001vh \u517c\u5bb9\u6027\u4e0d\u4f73\uff0c\u4e00\u4e2a\u4f7f\u7528\u5e7f\u6cdb\u7684\u79fb\u52a8\u7aef\u9002\u914d\u65b9\u6848 flexible \u662f\u501f\u52a9 rem \u6765\u6a21\u62df vw \u7279\u6027\u5b9e\u73b0\u79fb\u52a8\u7aef\u9002\u914d\u3002\u5728\u8bbe\u8ba1\u4e0e\u5f00\u53d1\u65f6\uff0c\u901a\u5e38\u4f1a\u7ea6\u5b9a\u67d0\u4e00\u79cd\u5c3a\u5bf8\u4e3a\u5f00\u53d1\u57fa\u51c6\u3002\u5f00\u53d1\u8005\u53ef\u4ee5\u5229\u7528\u5de5\u5177\uff08\u5982 px2rem\uff09\u8fdb\u884c\u7edd\u5bf9\u5355\u4f4d px \u548c\u5176\u4ed6 rem \u5355\u4f4d\u7684\u81ea\u52a8\u6362\u7b97\uff0c\u7136\u540e\u5229\u7528 flexible \u811a\u672c\u52a8\u6001\u8bbe\u7f6e html \u7684\u5b57\u4f53\u5927\u5c0f\u548c",(0,i.kt)("inlineCode",{parentName:"p"},'<meta name="viewport">'),"\u3002"),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"vw/vh")),(0,i.kt)("p",null,"\u7531\u4e8e\u76ee\u524d vw\u3001vh \u76f8\u5173\u5355\u4f4d\u83b7\u5f97\u4e86\u66f4\u591a\u6d4f\u89c8\u5668\u7684\u652f\u6301\uff0c\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528 vw\u3001vh \u5355\u4f4d\u8fdb\u884c\u79fb\u52a8\u7aef\u5f00\u53d1\u3002"),(0,i.kt)("p",null,"\u540c\u7406\u4e8e flexible \u65b9\u6848\uff0c\u4f7f\u7528 vw\u3001vh \u4e5f\u9700\u8981\u5bf9\u8bbe\u8ba1\u7a3f\u4e2d\u7684\u5c3a\u5bf8\u8fdb\u884c\u6362\u7b97\uff0c\u5c06 px \u8f6c\u6362\u4e3a vw \u503c\uff0c\u5e38\u89c1\u7684\u5de5\u5177\u5982 postcss-px-to-viewport \u7b49\u53ef\u4ee5\u6ee1\u8db3\u9700\u6c42\u3002"),(0,i.kt)("p",null,(0,i.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/17002181/129445686-b8265558-c270-4ad8-b8f9-e9773d00e923.png",alt:"image"})),(0,i.kt)("h3",{id:"6-\u4f7f\u7528\u54cd\u5e94\u5f0f\u56fe\u7247"},"6. \u4f7f\u7528\u54cd\u5e94\u5f0f\u56fe\u7247"),(0,i.kt)("p",null,"\u5c55\u793a\u56fe\u7247\u65f6\uff0c\u53ef\u4ee5\u5728 picture \u5143\u7d20\u4e2d\u5b9a\u4e49\u96f6\u6216\u591a\u4e2a source \u5143\u7d20\u548c\u4e00\u4e2a img \u5143\u7d20\uff0c\u4ee5\u4fbf\u4e3a\u4e0d\u540c\u7684\u663e\u793a/\u8bbe\u5907\u573a\u666f\u63d0\u4f9b\u56fe\u50cf\u7684\u66ff\u4ee3\u7248\u672c\u3002\u4ece\u800c\u4f7f\u5f97\u56fe\u7247\u5185\u5bb9\u80fd\u591f\u7075\u6d3b\u54cd\u5e94\u4e0d\u540c\u7684\u8bbe\u5907\uff0c\u907f\u514d\u51fa\u73b0\u56fe\u7247\u6a21\u7cca\u6216\u89c6\u89c9\u6548\u679c\u5dee\u4ee5\u53ca\u4f7f\u7528\u8fc7\u5927\u56fe\u7247\u6d6a\u8d39\u5e26\u5bbd\u7684\u95ee\u9898\u3002"),(0,i.kt)("p",null,"source \u5143\u7d20\u53ef\u4ee5\u6309\u9700\u914d\u7f6e srcset\u3001media\u3001sizes \u7b49\u5c5e\u6027\uff0c\u4ee5\u4fbf\u7528\u6237\u4ee3\u7406\u4e3a\u4e0d\u540c\u5a92\u4f53\u67e5\u8be2\u8303\u56f4\u6216\u50cf\u7d20\u5bc6\u5ea6\u6bd4\u7684\u8bbe\u5907\u914d\u7f6e\u5bf9\u5e94\u7684\u56fe\u7247\u8d44\u6e90\u3002\u5982\u679c\u6ca1\u6709\u627e\u5230\u5339\u914d\u7684\u56fe\u50cf\u6216\u6d4f\u89c8\u5668\u4e0d\u652f\u6301 picture \u5143\u7d20\uff0c\u5219\u4f7f\u7528 img \u5143\u7d20\u4f5c\u4e3a\u56de\u9000\u65b9\u6848\u3002"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html"},'<picture>\n <source\n srcset="hzfe-avatar-desktop.png, hzfe-avatar-desktop-2x.png 2x"\n media="(min-width: 990px)"\n />\n <source\n srcset="hzfe-avatar-tablet.png, hzfe-avatar-tablet-2x.png 2x"\n media="(min-width: 750px)"\n />\n <source\n srcset="hzfe-avatar-mobile.png, hzfe-avatar-mobile-2x.png 2x"\n media="(min-width: 375px)"\n />\n <img\n srcset="hzfe-avatar.png, hzfe-avatar-2x.png 2x"\n src="hzfe-avatar.png"\n alt="hzfe-default-avatar"\n />\n</picture>\n')),(0,i.kt)("h3",{id:"7-\u9002\u914d\u5b89\u5168\u533a\u57df"},"7. \u9002\u914d\u5b89\u5168\u533a\u57df"),(0,i.kt)("p",null,"\u7531\u4e8e\u624b\u673a\u5382\u5546\u5404\u6709\u7279\u8272\uff0c\u76ee\u524d\u624b\u673a\u4e0a\u5e38\u89c1\u6709\u5706\u89d2\uff08corners\uff09\u3001\u5218\u6d77\uff08sensor housing\uff09\u548c\u5c0f\u9ed1\u6761\uff08Home Indicator\uff09\u7b49\u7279\u5f81\u3002\u4e3a\u4fdd\u8bc1\u9875\u9762\u7684\u663e\u793a\u6548\u679c\u4e0d\u88ab\u8fd9\u4e9b\u7279\u5f81\u906e\u76d6\uff0c\u9700\u8981\u628a\u9875\u9762\u9650\u5236\u5728\u5b89\u5168\u533a\u57df\u8303\u56f4\u5185\u3002"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html"},'<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />\n')),(0,i.kt)("p",null,"\u8bbe\u7f6e ",(0,i.kt)("inlineCode",{parentName:"p"},"viewport-fit=cover")," \u540e\uff0c\u6309\u9700\u501f\u52a9\u4ee5\u4e0b\u9884\u8bbe\u7684\u73af\u5883\u53d8\u91cf\uff0c\u5bf9\u5143\u7d20\u5e94\u7528 padding\uff0c\u4ece\u800c\u786e\u4fdd\u5b83\u4eec\u4e0d\u4f1a\u88ab\u4e00\u4e9b\u4ee5\u4e0a\u7279\u5f81\u906e\u76d6\uff1a"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"safe-area-inset-left"),(0,i.kt)("li",{parentName:"ul"},"safe-area-inset-right"),(0,i.kt)("li",{parentName:"ul"},"safe-area-inset-top"),(0,i.kt)("li",{parentName:"ul"},"safe-area-inset-bottom")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-css"},"/* \u4f8b\u5b50\uff1a\u517c\u5bb9\u5218\u6d77\u5c4f */\nbody {\n /* constant \u51fd\u6570\u517c\u5bb9 iOS 11.2 \u4ee5\u4e0b*/\n padding-top: constant(safe-area-inset-top);\n /* env \u51fd\u6570\u517c\u5bb9 iOS 11.2 */\n padding-top: env(safe-area-inset-top);\n}\n")),(0,i.kt)("h2",{id:"\u53c2\u8003\u8d44\u6599"},"\u53c2\u8003\u8d44\u6599"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"http://iosres.com/"},"iOSRes")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts"},"Viewport concepts")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"https://www.quirksmode.org/mobile/viewports.html"},"A tale of two viewports")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design"},"Responsive Design")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout"},"Relationship of grid layout to other layout methods")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"https://webkit.org/blog/7929/designing-websites-for-iphone-x/"},"Designing Websites for iPhone X"))))}c.isMDXComponent=!0}}]); |