响应式网页重点

雪天web

共 710字,需浏览 2分钟

 ·

2021-10-28 03:36

  1. 单一个css文件  一个网站只写一个css文件,所有的css样式全部写在一个css文件里,index.css或者 base.css。


  2. max-width  网页的初始化样式写上,例如去掉所有元素的内外边距等,版心一定是最大宽度,不是宽度。


  3. %  网页所有的盒子的宽度和内外边距/间距全部使用百分比,这样写的页面没有固定宽高,缩放屏幕去看,就算不写响应式,也不会太乱,响应式的时候只需要修改少量布局样式即可,例如flex和浮动这样设置平行排列去掉改成纵向排列...。


  4. height:auto;  所有的元素盒子都不写高度,高度一律auto。


  5. img  尽量不用背景图片,因为背景不好做响应,只能用rem。最好写img图片,让图片撑满盒子,如果图片上面有其他的内容,把图片上面的元素使用一个定位盒子写上去。

  6. @media screen and ( max-width: 1000px ) 按照上一篇的档位 

    https://mp.weixin.qq.com/s/w1NxlrKtrrxevhgz9zlQQA

    使用媒体查询写响应式,pc端的各屏幕响应,改变版心的最大宽度,不要乱就行。1000px以下的响应式,就是手机端的页面响应,需要一个盒子一个盒子去修改元素的排列方式,包括字体大小,边距大小等,手机端要做到看起来精致。


  7. position  定位的元素,在pc端响应时把top和left值调整即可,在手机端,这些定位的元素需要重新布局,一般是去掉定位,让其正常排列(注意,无论是pc端还是手机端,做响应式的目的就是为了不让网页排列乱,一般手机端没有设计图的,排列方式自由发挥,但要排列的精致)

浏览 28
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报