响应式布局,也叫百分比布局
布局百分比的:
width
padding-left
padding-right
margin-left
margin-right
left
right
需要牢记的公式
宽度:
目标元素的宽度 / 父级元素的宽度 = 百分比宽度
高度:(Tips:高度的增加或者减少,需要配合媒体查询)
height
padding-top
padding-bottom
margin-top
margin-bottom
top
bottom
图片百分比
图片的宽度和高度比较弹性化
图片如果不设置宽度和高度,会显示图片的原始尺寸
当设置了图片的宽度百分比后,宽度发生变化,高度也会等比缩放
Tips:图片有时候太大,会超出,最好设置一个上限值,max-width 或者 max-height
文字百分比
文字单位:
em 和 rem
em:父级文字大小的倍数,父级文字大小会决定子级文字em的大小
rem:针对的是html文字字体的大小
一般响应式布局都用rem,通过媒体查询改变html的文字大小,就可以整体改变所有的页面中的文字大小
偷懒的响应式布局
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
width取值直接与页面定义的宽度一直,目前最佳实践,缺点Android 2.3.5版本以下不支持。
15、响应式布局
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 一、静态布局(Static Layout)即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。1、布局特...