怎么制作响应式网站(下)
2023-06-06 · 百度认证:重庆猪八戒网络有限公司官方账号
想这种出框的就是没有去掉蒙版,这时候我们需要画一个矩形,然后把他作为背景图像,裁切进去;另外,banner图也需要画一个矩形,然后设置100%宽度。
③网页内容和深圳图片的关系一定要分开由图知,红框内的是内容,外的是背景区;我们去理解背景是适应浏览器的,浏览器的宽度是会随设备而改变的,但内容是居中不变的;所以在PS设计的时候,内容必须独立开来。④先做好一个断点布局,然后先做最大的宽度适配。我们建议把基础断点的宽度设置为1280px,然后设置一个最大的适配宽度,我这里设置的是1600px;在适配的过程中,除了在1600px下调整元素的布局,还可以通过摇杆,左右拖拉,观察过渡的过程是否有问题出现。
⑤做好第一个和最大的适配后,开始调整网页元素的对齐参考点。我们可以看到,目前这个标题是居中对齐为参考的,那么在页面缩小或者扩大的时候,他就会以网页的中心为参考点,进行缩放;也可以是向左固定,参考元素到网页左边的距离,但左右固定通常是logo和菜单用的。
⑥开始适配768px平板宽度和375px手机宽度的布局同样是先调整布局,然后缩放元素,设置元素的对齐参考点。
⑦观察内容是否超出当前断点的编辑区域通常在不同的断点下,由于元素的缩放模式没有选择对,通常都会超出了断点编辑范围内,在超出后需要按照你需要进行调整。
⑧最后检查不断断点缩放的过程中,图片的缩放规则是否恰当。选择元素后,我们可以在Resize看到,图片的缩放模式,我们可以通过摇杆调整的过程中去观察,选择一种最合适的缩放方式;而类似LOGO之类的,就可以固定不变。
以上就是小编对于怎么制作响应式网站的解答。
网站响应式响应式网站