响应式开发css样式,响应式布局css
响应式布局 怎么用css写响应式
做响应式网站离不开CSS响应式布局查询代码写法,而在此之前,我们需要了解什么是媒体查询以及如何才CSS中引入媒体查询。
网站建设哪家好,找成都创新互联!专注于网页设计、网站建设、微信开发、微信小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了沭阳免费建站欢迎大家使用!
什么是媒体查询?
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color(等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。
如何在CSS中引入媒体查询?
媒体查询写在CSS样式代码的最后,CSS是层叠样式表,在同一特殊性下,靠后的的样式会重叠前面的样式。
如何用CSS做响应式布局呢?
1、在HTML头部添加以下代码,用来显示兼容移动设备的显示效果。
meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /
参数详解:
width=device-width :宽度等于当前设备的宽度
initial-scale=1 :初始的缩放比例(默认为1)
minimum-scale=1 :允许用户缩放到的最小比例(默认为1)
maximum-scale=1 :允许用户缩放到的最大比例(默认为1)
user-scalable=no :用户是否可以手动缩放(默认为no)
2、引入包含Media的CSS文件
一般情况HTMLCSS代码都是分开写的,Media也不例外。
link rel="stylesheet" type="text/css" href="m320.css" media="only screen and (max-width:320px)"/
link rel="stylesheet" type="text/css" href="m480.css" media="only screen and (min-width:321px) and (max-width:375px)"/
3、写Media中的代码
以某个网页的响应式布局为例
结构:@media设备类型and (设备特性){样式代码}
/*媒体查询*/
/*当页面大于1200px时,大屏幕,主要是PC端*/
@media (min-width: 1200px) {
}
/*在992 和1199 像素之间的屏幕里,中等屏幕,分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
#adver .center {
width: 50%;
margin: -10px 0 0 -25%;
}
main .center h2 {
font-size: 40px;
}
}
/*768和991像素之间的屏幕里,小屏幕,主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
#adver .center {
width: 60%;
margin: -10px 0 0 -30%;
}
#adver .search, #adver .button {
font-size: 20px;
}
main .center h2 {
font-size: 35px;
}
}
/*在480和767像素之间的屏幕里,超小屏幕,主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
header, header .center, header .link {
height: 45px;
}
header .logo, .sm-hidden,.sidebar,.md-hidden {
display: none;
}
header .link {
width: 100%;
line-height: 45px;
}
#adver {
padding: 45px 0 0 0;
}
#adver .center {
width: 70%;
height: 53px;
margin: -10px 0 0 -35%;
}
#adver .search, #adver .button {
height: 45px;
font-size: 18px;
}
.sm-visible {
display: block;
}
main .center h2 {
font-size: 30px;
}
main .center p {
font-size: 15px;
}
main figure {
width: 49.2%;
}
}
/*在小于480像素的屏幕,微小屏幕,更低分辨率的手机*/
@media (max-width: 479px) {
header, header .center, header .link {
height: 45px;
}
header .logo, .xs-hidden, .sm-hidden, .sidebar, .md-hidden {
display: none;
}
header .link {
width: 100%;
line-height: 45px;
}
header .link li {
width: 25%;
}
#adver {
padding: 45px 0 0 0;
}
#adver .center {
width: 80%;
height: 48px;
margin: -10px 0 0 -40%;
}
#adver .search, #adver .button {
height: 40px;
font-size: 16px;
}
.sm-visible {
display: block;
}
footer .bottom, footer .version {
font-size: 13px;
}
main .center h2 {
font-size: 26px;
}
main .center p {
font-size: 14px;
}
main figure {
width: 99%;
}
}
响应式布局的原理就是在不同的窗口大小下显示不同的结构和样式。只要掌握好CSS的样式,响应式布局就没问题。
CSS响应式:根据分辨率加载不同CSS的几个方法
一般情况下,根据分辨率加载pc端 wap端 pad端三个css文件,示例:
link rel="stylesheet" type="text/css" href="./css/style.css" media="all"
link rel="stylesheet" href="./css/phone.css" media="(max-width:620px)"
link rel="stylesheet" href="./css/pad.css" media="screen and (max-width:1024px) and (min-width:621px)"
只有一个css文件情况下,根据分辨率调整css样式,示例:
@media screen and (max-width:620px){
.logo{width: 300px;margin-left: -140px;}
}
@media screen and (max-width:1024px) and (min-width:621px) {
.logo{width: 220px;margin-left: -99px;}
.nav li:nth-of-type(2),.nav li:nth-of-type(3){width: 8%;}
.nav li:nth-of-type(5),.nav li:nth-of-type(6){width: 12%;}
}
Vue CSS 变量 — 响应式样式 RFC
单文件组件样式 RFC 为 Vue 开发人员提供了一种将组件的响应数据用作 CSS 变量的方法。
更复杂的数据结构,假设我们有一个名为 font 的对象,并且其中有一个名为 weight 的属性。
Vue 提供了内置的响应式系统,我们只需要修改响应式中的数据,便可以动态的修改页面中的外观。
使用到了 CSS 变量 ,我们样式中的 v-bind 最终将被编译为使用 CSS var 语法和我们的新 CSS 变量。
如果您希望在生产环境中实现这一点,请确保检查浏览器对 CSS 变量的支持。
如果没有 CSS 变量,SFC 样式变量将无法工作,因此如果您的应用程序需要支持某些较旧的浏览器,这对您来说可能不是一个可行的选择。
以下是 CSS 变量 支持情况:
怎么去找到好的响应式css框架?
这些前端框架能为您提供以下好处:
跨浏览器:前端框架都在不同的浏览器测试通过。
一致性: UI 组件,如导航,按钮,标签,表单,下拉菜单,表格... 他们的风格都相互统一。
快速开发:您可以轻松,快速的构建一个布局。他们通常有代码片段和优秀的文档。
响应式:所有 CSS 组件和 Javascript 插件能够从桌面扩展到移动端。
InK
Ink 是一个用于快速开发 Web 界面的 UI 套件,简单易用和。它通过整合 HTML,CSS 和 JavaScript 来提供现代化的解决方案,构建布局,显示通用的界面元素,为你的用户实现内容为中心的和用户友好的互动功能。
HTML CSS 组件:布局,导航,排版,图标,表格,提醒,表单。
JavaScript 组件:画廊,模态窗口,表格,可排序的日期选择器,选项卡,表单验证,行为(停靠,折叠,关闭)。
其它特性:支持 Sass 混入。
GroundworkCSS
GroundworkCSS 灵活的网格系统使你能够快速开发,并能够适应任何屏幕尺寸,从手持设备到大尺寸的显示屏。GroundworkCSS 构建在强大的 CSS 预处理器 Sass 的基础上。Sass 是对 CSS3 的扩展,并添加了嵌套规则,变量,混入,选择器继承等等众多特性。使用命令行工具或 Web 框架插件可以转换为标准的 CSS 代码。
HTML CSS 组件:网格,布局,排版,按钮,瓷砖,表格,表格,图示,社会的图标,响应文本,消息,警报。
JavaScript 组件:导航,标签,工具提示。
其它特性:支持 Sass 混入。
Ivory
灵活,强大的响应式 Web 框架,使 Web 开发更快,更容易。支持 1200 像素到 320px 区间的响应式布局。
HTML CSS 组件:网格,排版,表单,按钮,提醒,分页,面包屑,列表,表格。
JavaScript 组件:工具提示,选项卡,切换开关,手风琴。
Foundation
Foundation 是由加利福尼亚州的产品设计公司 Zurb 推出的。这是目前最先进的响应式前端框架,它有很多的模板布局,UI 组件的 CSS 样式,也收录了很多他们自己的 JavaScript 插件。
HTML CSS 组件:网格布局模板,图标,字体,响应式表格,SVG 社交图标,分页,面包屑,边栏导航,按钮,字体,标签,提醒,面板,价格表,进度条,表格,缩略图。
JavaScript 组件:下拉按钮,分割按钮,开关,自适应视频,灯箱,下拉列表,导航,显示模态窗口,选项卡,工具提示。
其他特性:自定义皮肤的表单,SCSS 混入。
Grumby
Gumby 2 基于强大的 Sass 构建,Sass 是一个功能强大的 CSS 预处理器,这使我们能够快速的开发自己的 Gumby,并为您提供新的工具,让你能够在 Gumby 的框架基础上快速定制。
HTML CSS 组件:网格,表单,按钮,导航,标签,Entypo 图标。
JavaScript 组件:切换开关,下拉框,选项卡,模态窗口。
其他特性:自定义皮肤的表单,SASS Compass。
HTML KickStart
超精益的 HTML5,CSS JS 模块,用于快速网站制作。它有一个全面的 UI 组件,也有一些有用的 JavaScript 插件,它的目标是成为设计师的朋友。
HTML CSS 组件:网格,排版,按钮,按钮条,列表,表格,图标,面包屑,图像,表格。
JavaScript:菜单,工具提示,语法高亮,选项卡,幻灯片,表单验证。
其他特性:额外的 CSS 工具。
Maxmertkit
这个框架是由 Vetrenko Maxim Sergeevich 创建的,使程序员的生活更轻松。Maxmerkit 是基于部件修改器编码风格的一个 CSS 框架。
HTML CSS 组件:网格布局,typograpghy,徽章,按钮,插入符,表格,图标,标签,菜单,进度表,下拉菜单,工具提示。
JavaScript 组件:按钮,转盘,模态窗口,通知,弹出层,选项卡,滚动侦测。
其他特性:支持 Sass, Coffee Script。
Twitter Bootstrap
Bootstrap 是基于 HTML,CSS 和 JavaScript 的简洁灵活的流行前端框架及交互组件集,由微博的先驱 Twitter 在2011年8月开源的整套前端解决解决方案。Bootstrap 有非常完备和详尽的开发文档,Web 开发人员能够轻松搭建出清爽风格的界面以及实现良好的交互效果。
HTML CSS 组件: 网格,布局,排版,代码,表格,表单,按钮,图像,图标,按钮组,导航,面包屑,分页,选项卡,徽章,缩略图,提醒,进度条。
JavaScript 组件: 过渡,模态窗口,下拉框,滚动检测,标签,工具提示,弹出层,警报,按钮,手风琴,旋转木马,自动补齐。
其它特性: 支持定制, LESS CSS。
Skeleton
Skeleton 是一个小集合的 CSS 文件,可以帮助你迅速开发任何尺寸,外观漂亮的网站,例如用于 17 寸笔记本电脑屏幕或 iPhone 屏幕的。Skeleton 建立在三个核心原则之上:兼容移动端的响应式网格,快速入门,风格无关。Skeleton 对于大多数开发者是一个相当不错的选择,因为它是轻量级的且易于使用。
HTML CSS 组件: 网格,排版,按钮,表单,媒体查询。
Kube
Kube 是由 imperavi (他也是著名的 Redactor 编辑器的作者)发布的前端框架,以使设计者/开发者的生活更轻松。简约而不简单,适应性和响应式能够使用各种需求。革命性的灵活网格和漂亮的印刷字体,没有任何强加的样式。
HTML CSS 组件:排版,表单,网格,表格,按钮,导航,图标。
JavaScript 组件: 按钮,标签。
其它特性:支持 LESS CSS。
Helium
Helium 是一种前端响应式 Web 开发框架,用于 HTML5 和 CSS3 项目的快速原型设计和实际开发。它在许多方面与 Twitter Bootstrap 和 ZURB Foundation 相似。然而,不同于这两个框架的是,Helium 的目的是要更轻量,更容易更改。把它看成是一个典型的汽车,在那里你可以打开引擎盖,容易对发动机进行改装。
HTML CSS 组件: 网格,按钮,排版,表格。
JavaScript 组件: 下拉框,表单验证,模态窗口。
其它特性: 支持 SASS Compass。
Markup
Markup 框架是一个布局,窗口小部件,排版样式和其他的 UI 组件的集合,可以根据自己的需要进行整合。
HTML CSS 组件:布局,网格,排版,表格,按钮,标题,面包屑,消息,导航列表,导航菜单。
JavaScript 组件: 无 Javascript,纯 CSS。
Topcoat
Topcoat 是一个 CSS 集合,用于简洁和快速的 Web 应用程序开发。它是一个开源库,不需要任何 JavaScript 内置的用户界面元素。
HTML CSS 组件: 图标,字体,按钮,面包屑,按钮栏,表格,下拉列表,滑动开关,标签,切换按钮,选择,滑块
JavaScript 组件: 无 Javascript ,纯 CSS
PureCSS
Pure 是一组轻量的,响应式的 CSS 模块,您可以使用在任何的 Web 项目中。充分考虑了移动设备中的使用,保持文件体积尽量小,每行 CSS 都进行了仔细的考虑。Pure 基于 Normalize.css 构建,并提供布局以及 原生 HTML 元素的风格,加上最常见的 UI 组件。相信这些都是你需要的。
HTML CSS 组件: 网格,排版,表格,按钮,表格,菜单。
JavaScript 组件: 无 Javascript ,纯 CSS。
其它特性: 皮肤制作器,YU 库。
文章标题:响应式开发css样式,响应式布局css
当前地址:http://pwwzsj.com/article/dsccgdg.html