首页 技术 正文
技术 2022年11月23日
0 收藏 700 点赞 3,609 浏览 1652 个字

1. 响应式布局

  响应式布局是2015年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。其目的是为用户提欧共更加舒适的界面和更好的用户体验。

2.优缺点

优点:

1) 面对不同分辨率设备灵活性强

2)能够快捷解决多设备显示适应问题

缺点:

1)兼容各种设备工作量大,效率低下

2)代码累赘,会出现隐藏无用的元素,加载时间长。

3 语法

CSS3 media queries的语法如下,

@media only screen and (max/min-width/height: 960px) {
/* 样式定义 */
}

  其中 “only screen” 参数表示限定当访问环境(媒体类型)为彩色屏幕设备时才生效。该参数可选值为 all | aural | braille | handheld | print | projection | screen | tty | tv | embossed除非该参数数值为all,否则可以在前面加个only限定类型。对于移动端和PC端,我们只需设为 “screen” 或 “only screen” 即可,建议使用后者,其语义更为严谨。
另一个参数 “max/min – width/height” 表示当屏幕的宽度/高度超过或者小于某个值时则生效,具体可以看下面的示例:

1)Max Width

@media only screen and (max-width:500px){
.outDiv {
margin: auto;
width: %;
height: %;
background: red;
}
}

  该代码段表示只有当屏幕宽度小于500px时才生效。

2) Min Width

@media only screen and (min-width:500px){
.outDiv {
margin: auto;
width: %;
height: %;
background: red;
}
}

  该代码段表示只有当屏幕宽度大于500px时才生效。

3) Max/Min Height

  同 max/min-width ,表示当屏幕高度小于/大于设定值时样式才生效。

4) Multiple Media Queries

  如果需要定义样式是在某个分辨率区间(比如500px-900px)才生效,就可以叠加使用 max/min-width/height 。

@media only screen  and (mix-width:500px) and (max-width:900px){
.outDiv {
margin: auto;
width: %;
height: %;
background: red;
}
}

4 例子

1)PC端响应式布局例子参考bootstrap学习总结-02 网格布局

2)移动端响应式布局例子

<!doctype html><!--声明当前文档为html文档-->
<html lang="en">
<head><!--头部-->
<meta charset="UTF-8"><!--字符编码:utf-8国际编码 gb2312中文编码-->
     <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale = 1.0,minimum-scale = 1.0,maximum-scale=1.0">
<title>Document</title>
<style>
*{margin:0px;padding:0px;}
@media all and (orientation:portrait){
#box{width:300px;height:500px;background:red;}
}
@media all and (orientation:landscape){
#box{width:300px;height:200px;background:blue;}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

  尝试使用手机浏览器打开此页面,当旋转手机时可以看到效果。

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/141480.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:875 阅读:5,067
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,504
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,312
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:730 阅读:4,307
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:4,904
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,097
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站