前言:昨天大半天写了一下任务七,之前也写过,但是自己都不忍心看自己的代码了,只能重新写一遍。虽然写的还是不太好,但是真的每次都有进步了。就是感觉要加快进度了,不能一直停留在这里,毕竟js才是大头,不知道到时候又要花多大力气去啃这个硬骨头了。
任务要求:
设计稿是有一定宽度的,这个宽度为页面的最小宽度,也就是说,当浏览器窗口宽度小于设计稿宽度时,允许出现横向滚动条,页面内容宽度保持不变,但是当浏览器窗口宽度大于设计稿宽度时,页面部分内容的宽度应该保持和浏览器窗口宽度一致。
之前在写这个任务的时候没有考虑到最小宽度这个问题,而且随着浏览器窗口的伸缩,页面里面的内容也会伸缩变形。然后review了别人的代码之后,发现需要给页面设置最小宽度。
body{
width: 100%;
/*最小宽度*/
min-width: 1280px;
}
但是为什么页面有时候按百分比设置宽度在不同的分辨率的浏览器下拉伸会出现变形的现象?这个问题还不是很明白,是要给父元素也设置width:100%吗?之后解决了再来追加补充吧。
还有一个至今没有解决的问题就是给input设置了背景图片之后整个input框就“消失”了,这个也是想不通。之后有机会再去问大神吧。