2018-10-05

Web前端：设计网页，常见的宽度！

网页设计中，宽度的设置，是没有绝对固定的值的，根据我们的需求出发。
只能说从常用的那几种分辨率来入手。

背景

初学html是老师告诉我们的是一般960px，

现在应该有好多这样宽度的设计，不过现在显示屏的设备一般在1024以上了，

比如现在的笔记本一般是1336*768，

这有那些大头的显示屏分辨率保持在1024左右，

新的液晶显示屏也都已经达到了1440*900的分辨率，

所以现在设计的话一般是960px,980px,1000px,1024px！

而且好多现在也都是做成自适应的方式！因为最近手持移动设备屏幕越来越大，网络越来越发达，流量也越来越多，网站并不局限于在pc上浏览，
平板与手机已经占据大多数！所以要综合考虑！
所以，定宽模式就不再赘述了，如果不是初学者，感觉定宽模式是需要经量避免的。
最好的做法就是做成自适应模式！

自适应模式

可能很多人听过，响应式布局，尤其前几年 H5 崛起的时候，很多初级网页设计师都觉得，网页设计以后就应该支持全平台，那些老的定宽规格都应该被淘汰。但是，宽度自适应模式和响应式设计不是完全相等的。

响应式设计，是在多种平台下可以良好显示和运行的一种框架，在不同的宽度下回展现出不同的排版和样式。

响应式布局，Boostrap就是一个很好的例子。早些时候我是不信邪的，后来说真的，开发响应式网页是真的累，如果不是专职做前端的，过程会很痛苦。
我不怎么推荐大家去使用响应式设计，因为局限性太大，实际的项目开发时长可能还不如 PC、移动端分别开制作。

而一般自适应宽模式，是让主内容区域可以随画布的拉伸而做调整，让整个浏览器的画布区域被最大化利用，展示更多的文字信息或图像，带来更好的浏览体验（设计得好的情况下）。

如果不是真的有需求，还没入坑的同学还是别入这个坑了，特别是没有团队开发的情况下。

常用的分辨率大小

Boostrap3 中原生支持的网页宽度为：1200px、992px、768px
目前来说常见的设备网页宽度为：1920px 1600px 1440px 1280px 1140px 960px 768px 640px 320px
浏览器能够直接测试用的移动设备网页宽度为：1024px 768px 414px 411px 375px 360px 320px
这么多分辨率，光是看看就感觉头大了吧。
一个人去做完它们全部的响应式，我感觉怕是要疯掉了。而且分辨率年年都在变化，越来越大。

整合成前端CSS代码，大致如下：

@media (max-width: 1920px) {}
@media (max-width: 1600px) {}
@media (max-width: 1440px) {}
@media (max-width: 1280px) {}
@media (max-width: 1140px) {}
@media (max-width: 1024px) {}
@media (max-width: 992px) {}
@media (max-width: 960px) {}
@media (max-width: 768px) {}
@media (max-width: 640px) {}
@media (max-width: 414px) {}
@media (max-width: 411px) {}
@media (max-width: 375px) {}
@media (max-width: 360px) {}
@media (max-width: 320px) {}