响应式网页重点
共 710字,需浏览 2分钟
·
2021-10-28 03:36
单一个css文件 一个网站只写一个css文件,所有的css样式全部写在一个css文件里,index.css或者 base.css。
max-width 网页的初始化样式写上,例如去掉所有元素的内外边距等,版心一定是最大宽度,不是宽度。
% 网页所有的盒子的宽度和内外边距/间距全部使用百分比,这样写的页面没有固定宽高,缩放屏幕去看,就算不写响应式,也不会太乱,响应式的时候只需要修改少量布局样式即可,例如flex和浮动这样设置平行排列去掉改成纵向排列...。
height:auto; 所有的元素盒子都不写高度,高度一律auto。
img 尽量不用背景图片,因为背景不好做响应,只能用rem。最好写img图片,让图片撑满盒子,如果图片上面有其他的内容,把图片上面的元素使用一个定位盒子写上去。
@media screen and ( max-width: 1000px ) 按照上一篇的档位
https://mp.weixin.qq.com/s/w1NxlrKtrrxevhgz9zlQQA
使用媒体查询写响应式,pc端的各屏幕响应,改变版心的最大宽度,不要乱就行。1000px以下的响应式,就是手机端的页面响应,需要一个盒子一个盒子去修改元素的排列方式,包括字体大小,边距大小等,手机端要做到看起来精致。
position 定位的元素,在pc端响应时把top和left值调整即可,在手机端,这些定位的元素需要重新布局,一般是去掉定位,让其正常排列(注意,无论是pc端还是手机端,做响应式的目的就是为了不让网页排列乱,一般手机端没有设计图的,排列方式自由发挥,但要排列的精致)