响应式网站规划关于处理多类型屏幕疑问来说是个不错计划，但从打印的视点来看，其却存在着许多的艰难。没有固定的页面尺度、没有毫米或英寸，没有任何物理约束，让人感到无从下手。跟着树立网站可用的各种小工具不断增加，像素规划局限于桌面和移动端也已经成为前史。因而，如今就让咱们来阐明一下怎么运用响应式网站规划的各项基本原则来完成，而不是抗拒流通的页面体会。为了简略起见，咱们将着重讲规划。
内容流
跟着屏幕尺度越来越小，内容所占的笔直空间也不断增加，也即是说，内容会向下方延伸，这就叫做内容流。假如你习惯了运用像素和点进行规划，也许会觉得这个有点难把握。不过没关系，习惯了就极好了解了。
相对单位
你的规划目标也许是台式桌面，也也许是移动端屏幕或许介于两者之间的恣意屏幕类型。像素密度也会互相不一样，所以咱们需求运用灵敏可变，而且能够习惯各种状况的单位。那么在这种状况下，百分比等相对单位就派上用场了。运用百分比时，咱们说宽度50%即是表明宽度占屏幕巨细(或许叫视区，也即是指所翻开浏览器窗口的巨细)的一半。
断点
断点能够让页面规划在预设的点进行变形，也即是说，在台式桌面上显现3栏，在移动设备上仅显现1栏。大多数CSS特点都能够完成断点之间的变形。断点放置的方位一般取决于内容。比方，假如一句话要换行，你也许就需求加上断点。但断点运用时需求慎重——假如搞不清内容之间的逻辑关系，很简单弄的一团乱。
最大和最小值
有时候内容占满全部屏幕宽度(例如在移动设备上)是功德，但假如相同的内容在电视屏幕上也撑得满满的，貌似就不太合理了。这即是为何要有最大/最小值。例如，假如宽度为100%，最大宽度1000px，那么内容就会以不超过1000px的宽度填充屏幕。
嵌套目标
还记得相对方位吗?假如一大堆要素互相都紧密联系，那么必将难以操控。因而，将要素放置到容器中就会让它们变得更加好了解，而且简练明快。这种状况就需求用到像素之类的静态单位了。静态单位关于logo和按钮等不需求拓展的内容来说非常有用。
移动优先仍是台式桌面优先
严格来说，项目从小屏幕下手过渡到大屏幕(移动优先)，仍是从大屏幕下手过渡到小屏幕(台式桌面优先)差异不大。但是，从移动端着手能够给你带来一些额定的约束，帮助你进行决议计划。一般状况下大家会从两方面一起着手，所以你仍是要看哪种方法最适合你。