\u5982\u679c\u4f60\u4e0d\u9700\u8981 12 \u5217\uff0c\u4f60\u53ef\u4ee5\u5408\u5e76\u4e00\u4e9b\u5217\uff0c\u521b\u5efa\u4e00\u4e9b\u66f4\u5927\u5bbd\u5ea6\u7684\u5217\u3002
\n $\"\"$
\nFoundation \u7684\u7f51\u683c\u7cfb\u7edf\u662f\u54cd\u5e94\u5f0f\u7684\u3002 \u5217\u4f1a\u6839\u636e\u5c4f\u5e55\u5c3a\u5bf8\u81ea\u52a8\u8c03\u6574\u5927\u5c0f\u3002\u5728\u5927\u5c3a\u5bf8\u5c4f\u5e55\u4e0a\uff0c\u53ef\u80fd\u662f\u4e09\u5217\uff0c\u5c0f\u5c4f\u5e55\u5c3a\u5bf8\u5c31\u53ef\u80fd\u662f\u4e09\u4e2a\u5355\u5217\uff0c\u6309\u987a\u5e8f\u6392\u5217\u3002<\/p>\n

\u7f51\u683c\u5217<\/strong><\/div>\n
Foundation \u7f51\u683c\u7cfb\u7edf\u6709\u4e09\u4e2a\u5217\uff1a<\/p>\n
\n
small (\u624b\u673a\u7aef)<\/li>\n
medium (\u5e73\u677f\u8bbe\u5907)<\/li>\n
large (\u7535\u8111\u8bbe\u5907\uff1a\u7b14\u8bb0\u672c\uff0c\u53f0\u5f0f\u673a)<\/li>\n<\/ol>\n
\u4ee5\u4e0a\u7c7b\u53ef\u4ee5\u7ed3\u5408\u4f7f\u7528\uff0c\u521b\u5efa\u66f4\u7075\u6d3b\u7684\u5e03\u5c40<\/p>\n
\u57fa\u672c\u7684\u7f51\u683c\u7ed3\u6784<\/strong><\/div>\n
\u4ee5\u4e0b\u662f\u57fa\u672c\u7684 Foundation \u7f51\u683c\u7ed3\u6784\u5b9e\u4f8b:<\/p>\n
<div class=\"row\">\r\n <div class=\"small|medium|large-num columns\"><\/div>\r\n<\/div>\r\n<div class=\"row\">\r\n <div class=\"small|medium|large-num columns\"><\/div>\r\n <div class=\"small|medium|large-num columns\"><\/div>\r\n <div class=\"small|medium|large-num columns\"><\/div>\r\n<\/div>\r\n<div class=\"row\">\r\n ...\r\n<\/div><\/pre>\n
\u9996\u5148\uff0c\u521b\u5efa\u4e00\u884c (div\u5217)\u3002 \u8fd9\u662f\u4e00\u4e2a\u6c34\u5e73\u7684\u5782\u76f4\u5217\u3002\u7136\u540e\u6dfb\u52a0\u5217\u7684\u6570\u91cf\u8bf4\u660e small-num, medium-num \u53ca large-num \u7c7b\u3002\u6ce8\u610f\uff1a\u5217\u7684\u6570\u91cf num \u52a0\u8d77\u6765\u5fc5\u987b\u7b49\u4e8e 12 :<\/p>\n
\u5b9e\u4f8b<\/p>\n
<div class=\"row\">\r\n <div class=\"small-12 columns\">.small-12 yellow<\/div>\r\n<\/div>\r\n<div class=\"row\">\r\n <div class=\"small-8 columns\">.small-8 beige<\/div>\r\n <div class=\"small-4 columns\">.small-4 gray<\/div>\r\n<\/div>\r\n<div class=\"row\">\r\n <div class=\"large-9 small-8 columns\">.small-8 .large-9 pink<\/div>\r\n <div class=\"large-3 small-4 columns\">.small-4 .large-3 orange<\/div>\r\n<\/div><\/pre>\n
\u5b9e\u4f8b\u4e2d\uff0c\u7b2c\u4e00\u884c\u7684div \u7c7b\u4e3a .small-12, \u8fd9\u4f1a\u521b\u5efa 12 \u5217\uff08100%\u5bbd\u5ea6\uff09\u3002
\n\u7b2c\u4e8c\u884c\u521b\u5efa\u4e86\u4e24\u4e2a\u5217\uff0c .small-4 \u7684\u5bbd\u5ea6\u4e3a33.3% \uff0c.small-8 \u7684\u5bbd\u5ea6\u4e3a 66.6%\u3002
\n\u7b2c\u4e09\u884c\u6211\u4eec\u6dfb\u52a0\u4e86\u989d\u5916\u7684\u4e24\u4e2a\u5217 (.large-3 \u548c .large-9)\u3002\u8fd9\u610f\u5473\u7740\u5982\u679c\u5728\u5927\u5c4f\u5e55\u5c3a\u5bf8\u4e0b\uff0c\u5217\u5c31\u4f1a\u53d8\u4e3a 25% (.large-3) \u548c 75% (.large-9)\u7684\u6bd4\u4f8b\u3002\u540c\u65f6\u6211\u4eec\u4e5f\u6307\u5b9a\u4e86\u5c0f\u5c4f\u5e55\u4e0a\u5217\u7684\u6bd4\u4f8b 33% (.small-4) \u548c 66% (.small-8) \u3002\u8fd9\u79cd\u7ec4\u5408\u7684\u65b9\u5f0f\u5bf9\u4e8e\u4e0d\u540c\u5c4f\u5e55\u663e\u793a\u6548\u679c\u662f\u975e\u5e38\u6709\u5e2e\u52a9\u7684\u3002<\/p>\n
\u7f51\u683c\u9009\u9879<\/strong><\/div>\n
\u4e0b\u8868\u603b\u7ed3\u4e86 Foundation \u7f51\u683c\u7cfb\u7edf\u5728\u591a\u4e2a\u8bbe\u5907\u4e0a\u7684\u8bf4\u660e\uff1a<\/p>\n\n\n\n\n\n\n\n\n\n
<\/th>\n \u5c0f\u578b\u8bbe\u5907
Phones (<40.0625em (640px))<\/th>\n \u4e2d\u7b49\u8bbe\u5907
Tablets (>=40.0625em (640px))<\/th>\n \u5927\u8bbe\u5907
Laptops & Desktops (>=64.0625em
\n\t(1025px))<\/th>\n<\/tr>\n
\u7f51\u683c\u884c\u4e3a<\/strong><\/td>\n \u4e00\u76f4\u662f\u6c34\u5e73\u7684<\/td>\n \u4ee5\u6298\u53e0\u5f00\u59cb\uff0c\u65ad\u70b9\u4ee5\u4e0a\u662f\u6c34\u5e73\u7684<\/td>\n \u4ee5\u6298\u53e0\u5f00\u59cb\uff0c\u65ad\u70b9\u4ee5\u4e0a\u662f\u6c34\u5e73\u7684<\/td>\n<\/tr>\n
\u7c7b\u524d\u7f00<\/strong><\/td>\n .small-*<\/td>\n .medium-*<\/td>\n .large-*<\/td>\n<\/tr>\n
\u7c7b\u7684\u6570\u91cf<\/strong><\/td>\n 12<\/td>\n 12<\/td>\n 12<\/td>\n<\/tr>\n
\u53ef\u5185\u5d4c<\/strong><\/td>\n Yes<\/td>\n Yes<\/td>\n Yes<\/td>\n<\/tr>\n
\u504f\u79fb\u91cf<\/strong><\/td>\n Yes<\/td>\n Yes<\/td>\n Yes<\/td>\n<\/tr>\n
\u5217\u6392\u5e8f<\/strong><\/td>\n Yes<\/td>\n Yes<\/td>\n Yes<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u5bbd\u5c4f<\/strong><\/div>\n
\u7f51\u683c\u6700\u5927(.row) \u5bbd\u5ea6\u4e3a 62.5rem\u3002\u5728\u5bbd\u5c4f\u4e0a\uff0c\u5f53\u5bbd\u5ea6\u5927\u4e8e 62.5rem, \u5217\u4e0d\u4f1a\u8de8\u8d8a\u9875\u9762\u7684\u5bbd\u5ea6\uff0c \u5373\u4f7f\u5bbd\u5ea6\u8bbe\u5b9a\u4e3a 100%\u3002\u4f46\u4f60\u53ef\u4ee5\u901a\u8fc7 CSS \u91cd\u65b0\u8bbe\u7f6e max-width:<\/p>\n
\u5b9e\u4f8b<\/p>\n
<style>\r\n.row {\r\n max-width: 100%;\r\n}\r\n<\/style><\/pre>\n
\u5982\u679c\u4f60\u4f7f\u7528\u9ed8\u8ba4\u7684 max-width, \u4f46\u5e0c\u671b\u80cc\u666f\u989c\u8272\u8de8\u8d8a\u6574\u4e2a\u9875\u9762\u5bbd\u5ea6\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 .row \u5305\u88f9\u6574\u4e2a\u5bb9\u5668\uff0c\u5e76\u6307\u5b9a\u4f60\u9700\u8981\u7684\u80cc\u666f\u989c\u8272:<\/p>\n
\u5b9e\u4f8b<\/p>\n
<div style=\"background-color:coral;padding:25px;\">\r\n <div class=\"row\">\r\n <div class=\"small-6 columns\" style=\"background-color:yellow;\">.small-6<\/div>\r\n <div class=\"small-6 columns\" style=\"background-color:pink;\">.small-6<\/div>\r\n <\/div>\r\n<\/div><\/pre>\n","protected":false},"excerpt":{"rendered":"
Foundation \u7f51\u683c\u7cfb\u7edf\u4e3a 12 \u5217\u3002 \u5982\u679c\u4f60\u4e0d\u9700\u8981 12 \u5217\uff0c\u4f60\u53ef\u4ee5\u5408\u5e76\u4e00\u4e9b\u5217\uff0c\u521b\u5efa\u4e00\u4e9b\u66f4\u5927\u5bbd\u5ea6\u7684\u5217\u3002 […]<\/p>\n","protected":false},"author":321,"featured_media":260109,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[55],"tags":[],"class_list":["post-260117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-thread"],"acf":[],"_links":{"self":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/260117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/users\/321"}],"replies":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/comments?post=260117"}],"version-history":[{"count":5,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/260117\/revisions"}],"predecessor-version":[{"id":260129,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/260117\/revisions\/260129"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/media\/260109"}],"wp:attachment":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/media?parent=260117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/categories?post=260117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/tags?post=260117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}