自适应网页设计宽度 第1篇
在定义网页宽度时，我们第一件事是考虑我们的受众用的显示器。显示器基本都是从 1024px 起始的，虽然这个分辨率的显示设备已经不多了（虽然我们公司就有很多，都是正方形的），我们就要根据客观条件考虑自己要支持最低的分辨率。
比如说现在常见的PC分辨率有1280*800、1600*900、1440*800、1366*768、1920*1080，目前来说设备中使用率最多的是1920的，如下图所示：
那么我们是不是在设计的时候用1920款的就可以呢？当然不是。
以我的工作经验来说，刚刚有讲到我们公司还是大量使用着1024px的电脑，所以在定义网页宽度的时候，这是要考虑第一个因素，虽然这样的设备在市面上已经很少见了，但是我们设计的时候就要以1024px的画板来画界面。
因为在业务正常使用的时候，显示器分辨率如果小于画布，内容就会显示不全，这让需要每天查看数据的业务看到显示不全的网页，这会非常难受的，比如说下图中的网页：
在1024px的情况下，页面就是显示不全的，同理就相当于你为业务设计的网页，却并没有考虑到他们的使用体验，所以我们在考虑设计网页尺寸的时候，实际要考虑的是我们用户显示器，而不是大部分设计师用多大的尺寸。
比如说上图中的UI中国、站酷，由于两个的网站受众群体都是互联网设计，而这类人群的设备性能都相对比较不错，所以他们网站最低的满足设备都是1366px起的。
一些企业设计的web管理系统，应用的设备统一大概率都是 1440px 宽以上的，所以我们在网上能够找到的Alipay和element的设计组件，设备大小是1440宽以上的。
还有一些面向人群比较多的网站，比如淘宝、京东等，由于受众群体跨度大，因此他的设备就要满足所有设备，从最低的1024开始支持。
以我们公司的网页设计为例，在确定了1024宽为设计尺寸，接下来要做就是确定主内容的区域宽出来，我之前遇到的很常见的问题就是两边没有留白，内容会直接贴边，但是我们看一下大部分的网站，在缩小的区域小于1024宽时，左右会产生留白，如下图所示：
这个内容边距要怎么定义呢，下面我们就来讲到。
自适应网页设计宽度 第2篇
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
具体说，CSS代码不能指定像素宽度：只能指定百分比宽度：或者
关于HTML网页设计自适应屏幕宽度就分享到这里了，解决问题并不止文章中和大家分析的办法，不过本文分析的方法准确性是不容置疑的。如果喜欢本篇文章，不妨把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
自适应网页设计宽度 第3篇
定义内容区域有两种办法，一种是用栅格：（ W =（a×n）+（n-1）i ）得到严谨实用的内容宽， 如下图所示：
这个做法就是通过将内容区域划分成若干内容块和间隔模块的方式，辅助我们排版。在本篇内容里不做具体介绍，只需要关注结果即可。
如果选择适配 1280px，那么设计内容的区域宽通常为 1180、1190。而在适配 1024px下，那么内容区域宽常见的就有 950、970、990 等。当我们创建完完整分辨率的画布，再通过参考线的方式将内容区域规划出来即可，如下图所示：
关于栅格化今天就不赘述了，有兴趣的可以看看这篇关于栅格的文章，传送门：
当然如果大家觉得复杂，我们可以使用第二种方法也是最简单的方式：宽度 = 支持最小宽度 - 左右留白。
这里就得到开头所说的，为什么常见的网页宽度分别为：960px、980px、1190px、1210px了。
自适应模式
说完了定宽的模式，我们再来说说自适应模式，这个分为两种：响应式网站和自适应网站，首先我们先来说说说自适应的网站。
自适应网页设计宽度 第4篇
响应式网站较为简单，设计师只要画一个界面就可以了，布局可以通过设定来自行调整。
而自适应网站设计师者要做两套或者多套不同的网页界面，以满足所有市场用户，比如说手机端可能就要重新设计了。
但是响应式的网站只适合比较简单的风格，面对一些比较复杂的框架结构就比较难以实现了，由于局限性比较大，实际项目的开发市场可能还不如自适应的网站，自适应往往就考虑几种状态，不需要长期考虑网站建设大小问题，因此你会发现自适应比响应式会更符合企业建站需求。
划重点
决定我们设计尺寸是取决于我们的主要受众用户，而不是茫然的跟着别的设计师，还要考虑到适配等等问题，虽然是最基础简单的尺寸，也藏着很多的知识点。
参考文献：
《【方法论】网页宽度怎么定？》
《Web UI设计师需要了解的用栅格化系统指导网页设计》
《设计网页，常见的宽度是多少像素？》
《响应式网站自适应网站的区别以及利与弊》
《网页宽度到底该怎么定？这篇全面好文告诉你！》
《响应式网站和自适应网站有什么区别?》
自适应网页设计宽度 第5篇
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择导入不同CSS文件。
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。
这只要一行CSS代码：
这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
老版本的IE不支持max-width，所以只好写成：
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
或者，Ethan Marcotte的。
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。
对于很多 IOS 开发者来说可能已经不太陌生了，为了适配Retina 屏幕，传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片，然后通过 Media Queries 使背景图片尺寸减小一倍「background-size:50% 50%;」， 设置不同屏幕下的图片加载url，例如：
1、先调查用户的使用情况，总结出大部分用户使用的都是什么设备访问网站。
2、将他们都罗列出来，然后去写媒体查询
比如：我的用户群体大概是这三种设备
先取其中中间的设备来做基本样式的书写
在页面中优先写出媒体查询的标签
width - viewport设备的宽度 height - viewport设备的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放
上面分配好了，按照这种方式写媒体查询
将页面中的px转换成相应的rem值
所有用px的高宽全部改成rem这样就完成了，对三种设备的适配