一、初识流式布局
“流式布局”多神秘呀？其实这招能让咱们的网页变得美美的，无论什么手机平板都能适应~你要是做过HTML网页就懂了，其实就是用百分比代替像素来设定网页宽度高度，这样屏幕大小变化，网页也能自动调整，始终美观！
二、为何选择流式布局
为啥要换用流式布局做手机站？现在手机样子太多，之前那些固定宽度的页面（比如960px或者980px）都不再适配新的屏幕尺寸。说不定哪天真就没用！
三、百分比布局的魔法
想把固定布局变成百分比？那还不简单～直接把要设置的元素宽度除以它爸妈（父元素）的宽度就OK，这样就能得到百分比宽度咯。不论屏幕大小怎么变动都不怕，都会自动调节保持内容清晰可见耶～
四、位置百分比的奥秘
其实看布局还得看看比例和位置百分比！你可以把定位距离或边距换算成百分数，这样就好理解。比如说，如果想让某个元素在页面左边缘留出50像素，而页面宽度是320像素的话，那么这个距离就等于50除以320，约等于15.625%。虽然有点绕，但学好了能让布局变得更灵活~
五、字体大小的变化艺术
搞定流媒体排版的字号可真费劲儿。以前用em单位设定字体大小，屏幕大小变了它能自动调整，挺方便的。但遇到复杂的网页布局，父元素字号一改，下面的子元素也得跟着动，这就让人头疼了。别慌，CSS3里有个新玩意儿叫rem单位，可以让字号跟着HTML根元素走，这下字号控制起来就轻松多了。
六、弹性图片的运用
流布局，弄个全屏（100%）的图就行了，或者根据手机屏幕调整大小。别忘了加上max-width，防止图片太大撑破了。这样看着舒服多了？
七、流式布局的局限与展望
手机网站的流动布局真的很酷但要做出好的真·响应式网页可不止这样比如，学好“媒体查询”这个技巧就特管用了。接下来我就教大家如何运用它，以及如何和流动布局配合，搞定超炫的响应式网页！
老实说流式布局就是牛，手机上看网站舒服很多。学起来可得花时间哈。各位伙计平时怎么用流式布局哒？赶紧在底下留言说说看，再顺手给文章点个赞呗~
评论0