博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
响应式Web设计
阅读量:6417 次
发布时间:2019-06-23

本文共 670 字,大约阅读时间需要 2 分钟。

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)

转载于:https://www.cnblogs.com/weiheli/p/3742722.html

你可能感兴趣的文章
图解微服务架构演进
查看>>
SQL PATINDEX 详解
查看>>
一些常用的网络命令
查看>>
CSP -- 运营商内容劫持(广告)的终结者
查看>>
DIV+CSS命名规范有助于SEO
查看>>
js生成二维码
查看>>
C指针练习
查看>>
web项目buildPath与lib的区别
查看>>
php对redis的set(集合)操作
查看>>
我的友情链接
查看>>
ifconfig:command not found的解决方法
查看>>
js使用正则表达式判断手机和固话格式
查看>>
计算机是怎么存储数字的
查看>>
CentOS改变docker默认存储池大小
查看>>
Docker存储驱动devicemapper介绍和配置
查看>>
win2008作为个人电脑用需要优化的部分
查看>>
vi教程
查看>>
yum 本地源配置问题
查看>>
从Vue.js窥探前端行业
查看>>
Linux chown改变文件所属关系命令
查看>>