首页 > 代码库 > 响应式Web设计
响应式Web设计
1. 响应式Web设计
采用灵活的、设备无关的方法来为Web进行设计。响应式Web设计使用了与渐进增强相同的思想。包括三个核心元素:媒介查询、流动布局、自适应图片。响应式站点不是PC站,也不是手机站。
2. 优雅降级
当你利用所有新的特性时,你要保证那些相对较老的浏览器也能访问你的内容。
3. 渐进增强
把优雅降级倒过来。
4. 四种布局类型
固定布局:宽度固定
流动布局:宽度是百度比
弹性布局:宽度单位是em
混合布局:使用以上2种及以上方式
5. 字体
常用的单位有:像素、em、rem、百分比
em:以父元素大小为基准
rem:以html元素大小为基准
最具响应性的单位:以百分比作为body字体大小的单位,以em作为其它元素的单位
6. 图片自适应
不能在img中设width各height属性,只能用css
max-width: 100%;
width: 100%;
7. 媒介查询
概念:允许你根据设备的信息(如屏幕宽度、方向、分辩率等 )来使用不同的样式。
外部文件样式:<meta rel="stylesheet" href="" media="all">
内联样式:@media type and (expr){
a{
}
}
常用的type有:all screen print
常用的expr有:width height orientation resolution
逻辑有:and not only ,(即or)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。