pc如何自适应布局 pc端如何根据设计稿做自适应
1.页面布局在不同分辨率下有不同程度的差异，尤其是页面上的表单控件，其宽度默认为width的固定值:150px。当分辨率较高时，表格中的空白点过多，导致页面布局不协调，尤其是在宽屏显示器上。
2.内容区采用媒体查询+固定宽度。到达某个断点后，改变内容区域的宽度，显示/隐藏某个内容。注意这里的火爆行情。虽然每个方块的宽度随着断点而变化，左上角的标签和里面的矩形白色区域在所有屏幕下都是宽度固定的，但也能完美适应不同的屏幕。
3.然后，当css中的边距和填充属性直接用百分比表示时，宽度是用百分比定义的，但高度大多是用px固定的。所以在大屏手机下的显示效果会变成一些页面元素的宽度被拉伸的很长，但是高度还是和以前一样，实际显示很不协调。这是流式布局最致命的缺点，在只有几个尺寸的手机下看到的效果往往是令人满意的。
4.经过一些辛苦的网页，全屏浏览很正常。但是改变了浏览窗口的大小后，网页变得不雅观，这是一个非常值得注意的问题。问题的根源还得从网页的布局说起。在DW中，网页内容的定位一般是通过表格来实现的，解决了表格的问题就成功了一大半。
5.里面嵌入了另一个表格，表格的宽度占表格单元格的50%，所以这个表格的宽度是300。如前所述，rem是由根元素适配的，根元素指的是html。我们可以通过设置html的字体大小来控制rem的大小。
6.在浏览器的功能设置中，有一个自由设置窗口内容字体大小的功能，这样呈现给不同访问者的网页，有时会因其设置习惯的不同而有所不同。比如你可能在原设计中使用了2号字体，结果由于浏览器的额外设置而变大了。
