pc如何自适应布局 pc端如何根据设计稿做自适应

Posted 2023-05-07

参考技术A 1、在不同分辨率下，页面布局存在不同程度的差异，特别是页面上的表单控件，其宽度默认是固定值width:150px，当分辨率较高时，表格中的空白显得过多，页面布局显得很不协调，在宽屏显示器上尤为明显。

2、内容区采用媒体查询+定宽，在达到某个断点之后更改内容区的宽度，并把某个内容显示/隐藏。 注意热门市场这里，虽然每一个方块的宽度是随着断点变化的，但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定宽度的，但是也可以完美的适应不同的屏幕。

3、然后在css中 有关margin和padding属性直接用百分比来表示 页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点，往往只有几个尺寸的手机下看到的效果是令人满意的。

4、一番辛苦做出来的网页，在全屏状态下浏览一切正常。但在改变浏览窗口大小之后，网页就变得不堪入目，这是个很值得注意的问题。 问题的根源还得从网页的布局说起，在DW中，网页内容的定位一般是通过表格来实现的，解决表格的问题也就成功了大半。

5、在它里面嵌入了另外一个表格，表格宽度占表格单元的50%，则这个表格的宽度为300，上面说过rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。

6、浏览器的功能设置中，有一个可以自由设置窗口内容字体大小的功能，这样由于不同访问者的设置习惯不同，呈现在他们面前的网页有时也会不不相同。比如你可能本来设计时用的是2号字体，结果由于用户对浏览器的额外设定，变的更大了

整屏滚动

最近一周写了一个pc端自适应的下载推广页面。

第一次做自适应的页面，在此记录一些体会。

首先我拿到的AI设计图纸是1920*1080的分辨率的。

和普通的定宽页面相比，在自适应的页面中，宽度设定为100%，高度需要通过js调节，通过获取视口的高度。再为每一个整屏页面赋值。在项目中我设定页面的最小高度为600px。pc端大概也没有分辨率低于这个数字的了吧。

var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
if (height < 600) height = 600

然后页面中在布局的时候需要将1080p下的分辨率转化为rem。然后通过css的@media修改页面的基础font-size从而达到目的。

@media screen and (max-width: 1024px) {
　　html {
　　　　font-size: 62.5% !important;
　　}

}

图片的部分，注意background-size要使用contain属性。然后每一页要设置好底色。为了保证在类似1000*1400的比例下还能达到一屏一页的效果。图片容器的高度可以设置成100%，然后通过background的size和position属性使其居中。这样就会有一个不错的效果。

最后，为了达到页面整屏滚动的目的。再使用js。

$(document).ready(function () {
　　reloadHeight()
　　var isfinish = true
　　var scrollFunc = function () {
　　var height = getHeight()
　　// 当前页面为第X页面 为防止页面刚好超过1.2px。
　　var level = Math.floor((window.pageYOffset+20)/height)
　　var newScrollTop
　　if (event.wheelDelta < 0) {
　　　　if (level === 4) return
　　　　level += 1
　　} else {
　　　　if (level === 0) return
　　　　level -= 1
　　}
　　if (isfinish) {
　　　　isfinish = false
　　　　newScrollTop = level * height
　　　　$("html, body").animate({
　　　　　　scrollTop: newScrollTop + ‘px‘
　　　　}, 400, function () {
　　　　　　isfinish = true
　　　　　　})
　　　　}
　　}
　　$(this).on("mousewheel", scrollFunc)
})

调试的时候发现在chrome下，一次滚动会触发多个mousewheel事件。于是利用isfinish控制。

$("html, body").animate（）在IE下用html，chrome下用body。还不知道为什么。

然后这个整屏滚动的效果，本来用js写的，但是效果很捉急，然后换了jquery的animation，效果稍微好一点，但是其实还是很捉急，尤其是在IE下面。。