响应式设计
2016-03-24 12:02
274 查看
最近响应式设计很火,而我对其的理解也比较片面,向总的来写一篇关于响应式的笔记。。。~
我以前对响应式的理解或许更多集中在对于不同屏幕有不同的响应,也就是使用媒体查询功能来实现。
那也就首先来说下媒体查询。
首先是meta标签里面的,viewport是可视窗口大小,就是移动设备上显示我们网页的那部分。content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”
说的是关都等于当前设备宽度,初始缩放比例为1,最大缩放为1默认就是1,用户是否可以手动缩放,默认不可以。我们可以根据情况改变。
下面就是媒体查询的断点,简单的说就是告诉屏幕到什么时候的时侯变化。
这三行分别是等于960px,大于960px,小于1024px的意思,我们看下如何使用
Viewport小于980px body的宽度为95%。
以前我对响应式的布局理解就差不多是这样,最近读了读响应式的文章,发现自己还有很多不知道的,于是也就记了下来。
下面说下响应式布局,
1.尽量少用无关紧要的div
2.不使用内联元素(inline)
3.尽量少用js或flash
4.丢去没用的绝对定位和浮动样式
5.屏弃任何冗余结构和不使用100%设置
我平时使用的是流体布局,介绍两种CSS3新的布局,一个是弹性布局,一个是网格布局,以后再慢慢具体介绍,这里只是简单提一下。
使用流体布局时结合
这是CSS3中的新属性,什么意思呢,就是改变盒模型,使我们的padding和border计算在我们定义的大小之内,这样我们只需要保证我们定义的总的大小不超过100%就可以了。
`
下面是图片大小自适应
假设我们的图片是1024px;
但上面是传统做法会有很多问题。并不是什么时候都可以,我搜罗了下最近的处理方法
下面说一下H5 新标签picture来实现响应式。
具体用法可以自行查询,这里就是稍微一说。
下面还有一种设置图片断点方法
字体的响应式
字体也不要放过,响应式中字体大小我们可以使用单位rem和em这种相对的,稍微提一下,以后再详细说。很多UED上都有这方面的知识。
在屏幕很小的时候我们需要单列布局时,我们可以把不重要的部分消失,其他宽度设置为100%,就可以了。
我以前对响应式的理解或许更多集中在对于不同屏幕有不同的响应,也就是使用媒体查询功能来实现。
那也就首先来说下媒体查询。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
首先是meta标签里面的,viewport是可视窗口大小,就是移动设备上显示我们网页的那部分。content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”
说的是关都等于当前设备宽度,初始缩放比例为1,最大缩放为1默认就是1,用户是否可以手动缩放,默认不可以。我们可以根据情况改变。
下面就是媒体查询的断点,简单的说就是告诉屏幕到什么时候的时侯变化。
max-device-width:960px min-width:960px max-width:1024px
这三行分别是等于960px,大于960px,小于1024px的意思,我们看下如何使用
@media screen and (max-width: 980px) { body { width:95%; }
Viewport小于980px body的宽度为95%。
以前我对响应式的布局理解就差不多是这样,最近读了读响应式的文章,发现自己还有很多不知道的,于是也就记了下来。
下面说下响应式布局,
1.尽量少用无关紧要的div
2.不使用内联元素(inline)
3.尽量少用js或flash
4.丢去没用的绝对定位和浮动样式
5.屏弃任何冗余结构和不使用100%设置
我平时使用的是流体布局,介绍两种CSS3新的布局,一个是弹性布局,一个是网格布局,以后再慢慢具体介绍,这里只是简单提一下。
使用流体布局时结合
box-sizing:border-box;
这是CSS3中的新属性,什么意思呢,就是改变盒模型,使我们的padding和border计算在我们定义的大小之内,这样我们只需要保证我们定义的总的大小不超过100%就可以了。
`
下面是图片大小自适应
假设我们的图片是1024px;
img{ max-width:100%; height: auto; }
但上面是传统做法会有很多问题。并不是什么时候都可以,我搜罗了下最近的处理方法
下面说一下H5 新标签picture来实现响应式。
具体用法可以自行查询,这里就是稍微一说。
下面还有一种设置图片断点方法
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt=""> @media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); } } @media (min-device-width:800px) { img[data-src-800px] { content: attr(data-src-800px, url); } }
字体的响应式
字体也不要放过,响应式中字体大小我们可以使用单位rem和em这种相对的,稍微提一下,以后再详细说。很多UED上都有这方面的知识。
在屏幕很小的时候我们需要单列布局时,我们可以把不重要的部分消失,其他宽度设置为100%,就可以了。
@media screen and (max-width:300px) { .not_mobile{display: none;} }
相关文章推荐
- linux下vi命令大全
- About Integration
- grunt的一些注意事项
- 关于IT行业的抄袭事件
- C++中的文件流
- Git新手上路,让你快速掌握Git的基本使用
- struts2第一个程序
- java websocket简单实例绝对可用
- String.intern、new String()、以及String =""总结:
- R语言学习路线和常用数据挖掘包
- Android图像处理总结
- 诡异的楼梯
- Git新手上路,让你快速掌握Git的基本使用
- oracle实现递归查询
- RelativeLayout中的位置属性
- 自定义广播和广播优先级
- socket学习之聊天室
- UDP通讯程序设计
- MySQL之binlog_row_image参数
- Caffe傻瓜系列(10):draw_net.py绘制caffe net结构