前端知识点整理系列(一)—— 响应式布局
来源:互联网 发布:数控车床编程步骤例题 编辑:程序博客网 时间:2024/06/08 18:42
今天整理关于响应式布局的知识。响应式布局这个名词现在应该已经很熟悉了,随着移动端的普及,我们的网站的用户体验需要提升,响应式布局可以解决我们的问题。
什么是响应式布局?
简单点说,就是同一个页面可以适应不同的屏幕大小设备的设计方案,做一个网站同时能兼容多个终端,通过CSS中Media Query(媒介查询)@media功能,来判断我们的终端设备宽度在多少像素内,然后就执行与之对应的CSS样式。
布局及设置meta标签
当创建一个响应式网站,或者非响应式网站变成响应式的时候,首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局,页面固定宽度大小。如果完成了非响应式那么我在去添加媒体查询(Media Query)和响应式代码。这种操作更容易实现响应式特性。在手机设备上,我们要禁止用户来缩放屏幕。不禁止的话,可能在显示上会造成错位,以及显示的不是手机网站的样式。所以,我们要通过代码来禁止用户在手机端上缩放屏幕,已达到正常的手机网站效果。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
通过媒体查询来设置样式media query
media query 是响应式设计的核心,它能够和浏览器进行沟通,告诉浏览器页面如何呈现,假如一个终端的分辨率小于980px,那么可以这样写,这个时候的布局会覆盖掉之前设置的布局。
@media screen and (max-width:980px){ #head { … } #content { … } #footer { … }}
设置多种视图宽度
假如我们要兼容ipad和iphone视图,我们可以这样设置:
/**ipad**/@media only screen and (min-width:768px)and(max-width:1024px){}/**iphone**/@media only screen and (width:320px)and (width:768px){}
响应式的图片
- 大图随容器缩放,保持宽高比
- max-width: 100%;
#wrap img{ max-width:100%; height:auto; }
如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充,height为auto的设置是为了保证图片原始的高宽比例,以至于图片不会失真。
阅读全文
1 0
- 前端知识点整理系列(一)—— 响应式布局
- 前端知识点整理系列(一)—— Ajax
- 前端知识点整理系列(二)—— apply() call() bind()
- Connect教程系列--响应式布局(一)
- 前端理解整理:响应式布局的理解
- 响应式布局(一)
- 响应式布局知识点总结
- 前端开发,响应式布局。
- WEB前端 | H5基础——(4)流式布局、响应式布局、Viewport
- 响应式布局一
- 前端小白系列(2)—— 适配与响应式
- 响应式布局初涉(一)
- 常见的响应式布局(一)
- 前端开发-移动端(3)- 响应式布局
- JavaScript系列一:入门知识点整理
- 前端页面响应式布局 简单实现
- 前端 响应布局
- 前端知识点总结(一)
- js作用域(一)
- Py第二十三问 从git下载项python目到eclipse
- 利用数组和Substitute替换字符
- 链表栈操作类
- Java的接口——Java中的多继承
- 前端知识点整理系列(一)—— 响应式布局
- const只读变量的内存分配
- one day
- VIM+cscope+ctags使用与总结
- Patching Array
- 斯坦福机器学习实验之1-单变量线性回归(Linear Regression with One Variable)
- Collection接口 和 Map接口
- SpringMVC拦截器实现登陆时的验证拦截
- (25)模拟和运行