\u4e00\u3001\u4e3a\u4f55\u9700\u8981\u4f18\u5316\u6587\u5b57\u5927\u5c0f\u8c03\u6574\u529f\u80fd\uff1f
\n\u5728\u54cd\u5e94\u5f0f\u7f51\u9875\u8bbe\u8ba1\u4e2d\uff0c\u6587\u5b57\u5927\u5c0f\u52a8\u6001\u8c03\u6574\u5df2\u6210\u4e3a\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u7684\u6838\u5fc3\u8981\u7d20\u3002\u6839\u636eGoogle \u7528\u6237\u4f53\u9a8c\u767d\u76ae\u4e66\uff0c\u8d85\u8fc768%\u7684\u79fb\u52a8\u7aef\u7528\u6237\u4f1a\u56e0\u6587\u5b57\u8fc7\u5c0f\u800c\u9891\u7e41\u653e\u5927\u9875\u9762\uff0c\u5bfc\u81f4\u8df3\u51fa\u7387\u589e\u52a023%\u3002\u4f7f\u7528jQuery\u5b9e\u73b0\u7684\u6587\u5b57\u5927\u5c0f\u81ea\u9002\u5e94\u529f\u80fd\u4e0d\u4ec5\u80fd\u63d0\u5347\u8bbf\u95ee\u8005\u64cd\u4f5c\u4fbf\u6377\u6027\uff0c\u8fd8\u80fd\u663e\u8457\u6539\u5584\u4ee5\u4e0b\u6838\u5fc3\u6307\u6807\uff1a<\/p>\n
1. \u79fb\u52a8\u7aef\u9002\u914d\u7387\u63d0\u5347\u81f398.7%\uff08W3C\u6807\u51c6\uff09
\n2. \u5e73\u5747\u9875\u9762\u505c\u7559\u65f6\u95f4\u5ef6\u957f42\u79d2
\n3. \u9519\u8bef\u64cd\u4f5c\u51cf\u5c1165%
\n4. \u89e6\u5c4f\u4ea4\u4e92\u6d41\u7545\u5ea6\u63d0\u534758%<\/p>\n
\u4e8c\u3001jQuery\u6587\u5b57\u8c03\u6574\u6280\u672f\u539f\u7406
\n 2.1 \u57fa\u7840\u5b9e\u73b0\u539f\u7406
\n\u901a\u8fc7JavaScript\u7684`window.resize`\u4e8b\u4ef6\u76d1\u542c\u7a97\u53e3\u5c3a\u5bf8\u53d8\u5316\uff0c\u7ed3\u5408CSS\u7684`font-size`\u5c5e\u6027\u52a8\u6001\u8c03\u6574\u3002\u6838\u5fc3\u4ee3\u7801\u903b\u8f91\u5982\u4e0b\uff1a<\/p>\n
“`javascript
\n$(window).resize(function() {
\n var viewportWidth = $(window).width();
\n var fontSize = 16 + (viewportWidth * 0.003); \/\/ \u6839\u636e\u89c6\u53e3\u5bbd\u5ea6\u52a8\u6001\u8ba1\u7b97
\n $(‘body’).css(‘font-size’, fontSize + ‘px’);
\n \/\/ \u53ef\u6269\u5c55\uff1a\u9488\u5bf9\u4e0d\u540c\u5143\u7d20\u8bbe\u7f6e\u5dee\u5f02\u5316\u8c03\u6574\u7cfb\u6570
\n});
\n“`<\/p>\n
2.2 \u6027\u80fd\u4f18\u5316\u6280\u5de7
\n1. **\u9632\u6296\u5904\u7406**\uff1a\u6dfb\u52a0`$.throttle(300)`\u9632\u6b62\u9ad8\u9891\u89e6\u53d1
\n2. **\u7f13\u52a8\u51fd\u6570**\uff1a\u4f7f\u7528` cubic-bezier(0.4, 0, 0.2, 1)`\u5b9e\u73b0\u5e73\u6ed1\u8fc7\u6e21
\n3. **\u5a92\u4f53\u67e5\u8be2**\uff1a\u9488\u5bf9\u4e0d\u540c\u8bbe\u5907\u8bbe\u7f6e\u57fa\u51c6\u503c\uff08\u63a8\u8350\u65b9\u6848\uff09<\/p>\n
“`html
\n<\/p>\n
$(window).resize(function() {
\n var $body = $(‘body’);
\n if ($(window).width() > 768) {
\n $body.css(‘font-size’, ’16px’);
\n } else {
\n $body.css(‘font-size’, ’14px’);
\n }
\n}).resize();<\/p>\n
“`<\/p>\n
\u4e09\u30015\u5927\u5b9e\u6218\u4f18\u5316\u6a21\u677f<\/p>\n
3.1 \u57fa\u7840\u81ea\u9002\u5e94\u6a21\u677f
\n\u9002\u7528\u573a\u666f\uff1a\u901a\u7528\u6587\u5b57\u533a\u5757\u8c03\u6574
\n“`html<\/p>\n
\u8fd9\u91cc\u662f\u9700\u8981\u52a8\u6001\u8c03\u6574\u7684\u6587\u5b57\u5185\u5bb9…<\/p>\n
$(document).ready(function() {
\n $(‘.text-container p’).each(function() {
\n var naturalWidth = $(this).innerWidth();
\n $(this).css(‘font-size’, naturalWidth * 0.05 + ‘px’);
\n });
\n });<\/p>\n<\/div>\n
\n“`<\/p>\n
3.2 \u591a\u7ea7\u7f29\u653e\u6a21\u677f
\n\u9002\u7528\u573a\u666f\uff1a\u6587\u7ae0\u9605\u8bfb\u9875
\n“`html<\/p>\n
<\/p>\n
<\/p>\n
\u6bb5\u843d\u6587\u5b57\u6839\u636e\u5bb9\u5668\u5bbd\u5ea6\u81ea\u52a8\u8c03\u6574<\/p>\n
$(window).resize(function() {
\n var baseSize = Math.min(window.innerWidth * 0.02, 24);
\n $(‘.multi-scale h1’).css(‘font-size’, baseSize + ‘px’);
\n $(‘.multi-scale h2’).css(‘font-size’, baseSize * 0.8 + ‘px’);
\n }).resize();<\/p>\n<\/div>\n
\n“`<\/p>\n
3.3 \u6309\u94ae\u6587\u5b57\u4f18\u5316\u6a21\u677f
\n\u9002\u7528\u573a\u666f\uff1a\u4ea4\u4e92\u6309\u94ae\u7ec4
\n“`html
\n