纯CSS响应式的总结

响应式需要兼容的设备及尺寸

手机（分辨率不统一，320px - 414px）
pad（1024px * 768px 横屏 / 768px * 1024px 竖屏）
pc普屏（1024px * 768px，一般使用1000px适配）
pc宽屏（大于1190px， 1366px * 768px / 1440px * 768px / 1920px * 1080px …）

媒体查询的判断条件

min-width / max-width （遵循顺序原则，一般从小写到大）
设备类型

/* * 一般根据屏幕宽度写的响应式页面如下 * 从最低宽度写起，避免pc端的额外样式再还原回默认值了,如：positon: static; float: none; border: none; ...*/
div{/* 这里写通用样式和手机样式 */
}
@media (min-width: 768px){div{/* pad样式，一般小于768的都为手机样式 */}
}
@media (min-width: 1000px){div{/* pc样式，可以设为1000 兼容pad横屏，也可以设置到1024只用于电脑 */}
}

媒体查询的关键字和条件

and 并且

@media (min-width:768px) and (max-width: 999px){/* 宽度大于等于768px，并且小于等于999px */
}

not 不是

@media (min-width:768px) not screen{/* 最小宽度768px，而且不是屏幕 */
}

only 不支持的忽略

@media (min-width:768px) onlt screen{/* 满足最小宽度768px，不是屏幕的忽略 */
}

device-width / min, max 设备的实际宽度

@media (min-device-width:768px) and (max-device-width:1000px){/* 设备实际宽度满足 >= 768 && <= 1000 */
}

landscape横屏 / portrait 竖屏

@media (orientation:landscape){/* 单独写的话 类似于min-width 也要加括号 */
}
@media (max-width:768px) and (orientation:landscape){/* 可以与别的条件用时使用 */
}

响应式媒体类型

可以指定的值	设备类型
all	所有设备
screen	电脑显示器
print	打印用纸或打印预览视图
handled	便携设备
tv	电视机类型的设备
speech	语音和音频合成器
braile	盲人用点字法触觉回馈设备
embossed	盲人打印机
projection	各种投影设备
tty	使用固定密度字母栅格的媒介，比如电传打字机和终端

响应式样式表的引用

为了后期更方便调整和修改，一般写成样式表，如：
common.css（公用样式 / 手机样式） / pad.css / pc.css / pc-w.css
再比如有ie6-8兼容要求时，ie.css

<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/pad.css" media="screen and (min-width:768px)" />
<link rel="stylesheet" href="css/pc.css" media="screen and (min-width:1000px)" />
<link rel="stylesheet" href="css/pc-w.css" media="screen and (min-width:1200px)" />

其他

为了移动端的适配添加的 < meta >

<meta name="viewport" id="viewport" content="width=device-width, initial-scale=no, user-scalable=0" />

纯CSS响应式的总结相关推荐

android 六边形布局,纯CSS响应式六边形网格布局
hexagons.css是一款纯CSS3响应式六边形网格布局系统.通过hexagons.css预设的样式,可以非常轻松的制作出六边形图片网格布局.它的特点还有: 六边形网格会根据容器的宽度自动调整. ...
css响应式网格布局生成器_如何使用网格布局模块使用纯CSS创建响应表
css响应式网格布局生成器 TL; DR (TL;DR) The most popular way to display a collection of similar data is to use ...
社会化图标html,[CSS]响应式社会化分享按钮
[CSS]响应式社会化分享按钮 6月 18, 2014 评论 (2) Sponsor 目前很多网站都使用了社会化分享按钮,即使是一个简单的专题页都会使用上,所以这里分享大家一个响应式社会化分享按钮(R ...
css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
css响应式网页设计：自适应屏幕宽度、移动页面开发技巧
html响应式网页设计:自动适应屏幕宽度文章目录 html响应式网页设计:自动适应屏幕宽度背景一."自适应网页设计"的概念二.允许网页宽度自动调整-使用meta标签:vie ...
CSS - 响应式布局（二）响应式栅格系统
目录响应式栅格系统栅格栅格系统响应式栅格系统 BootStrap响应式栅格系统简单说明利用SCSS实现BootStrap的响应式栅格系统响应式栅格系统栅格在弄清楚响应式栅格系统前,我 ...
CSS响应式布局（自适应布局）
CSS 响应式布局也称自适应布局,是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念,简单来讲就是一个网站能够兼容多个不同的终端(设备),而不是为每个终端做一个特定的版本.这个 ...
java 自适应屏幕_自适应屏幕的CSS响应式布局设计技巧总结
摘要:这篇CSS教程栏目下的"自适应屏幕的CSS响应式布局设计技巧总结",介绍的技术点是"css响应式.响应式布局.响应式.自适应.CSS.设计",希望对大家开 ...
html中响应式查询,css 响应式（媒介查询）
1.CSS 来实现响应式 CSS实现响应式网站的布局要用到的就是CSS中的媒体查询接下来来简单介绍一下: @media 类型 and (条件1) and (条件二){css样式} 我们只需用到widt ...

纯CSS响应式的总结

响应式需要兼容的设备及尺寸

媒体查询的判断条件

媒体查询的关键字和条件

响应式媒体类型

响应式样式表的引用

其他

纯CSS响应式的总结相关推荐

最新文章

热门文章