继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

responsive设计--响应式设计

startitunderground
关注TA
已关注
手记 58
粉丝 99
获赞 931

响应式设计简单讲就是,让网页在不同的设备上呈现不同的设计风格
响应式设计必须满足三个条件:
1,网站必须建立灵活的网格基础
2,引用到网站的图片必须是可伸缩的
3,不同的显示风格需通过@medail上写不同的样式;
流体网格
流体网格:每个网格格子都是用百分比单位来控制网格大小,这样网格优点是不同的设备屏幕呈现不同的放缩比例;
弹性图片
弹性图片是不给固定的图片尺寸,而是根据流体网格进行放缩,适应各种网格的尺寸
img{
max-width:100%;
}
屏幕分辨率
屏幕分辨率简单点说就是用户显示器的分辨率,
responsive布局的技巧
1,尽量少用无关紧要的div
2,不要使用内联元素
3,尽量少用js
4,不要使用没用的绝对定位,和浮动;
5,放弃100%设置

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP