详解前端响应式布局、响应式图片,与自制栅格系统
首先我们要清楚的知道,什么是响应式,响应式就是在同一个页面的不同尺寸下有不同的布局,那么传统的开发方式是PC端一套,手机端再开发一套,而响应式布局只需要开发一套就好了,缺点是CSS比较重要。
响应式布局方案选择
响应式设计可选择的方案有:
CSS3 Media Query(推荐):媒体查询,兼容到IE9+,但可以通过插件兼容IE6-8
Flex:弹性布局,兼容性较差(IE10+)
Grid:网格布局,兼容性更差
Columns:栅格系统,往往需要依赖于某个UI库,如bootstrap
响应式开发最不好不要杂合使用rem
CSS3 Media Query简介
利用CSS3 Media Query可以轻松实现不同屏幕宽度时切换不同的页面布局
兼容性:IE9+
目前实现CSS3 Media Query 对于IE兼容的库比较成熟的有respond.js和css3-mediaqueries-js,它们各有优劣
respond.js(推荐):压缩后1k,只实现了media query中最常用的min-width max-width的兼容;
css3-mediaqueries-js:基本实现了所有css3规范中的media query特性的兼容,所以导致压缩有16k,测试反馈其性能远低于respond.js;
<!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
CSS3 Media Query使用
引入方式分为内嵌样式和外部样式,建议使用内嵌样式
使用内嵌样式时,建议将响应式代码写在对应正常样式的下面,不分开书写,以便维护
// 屏幕尺寸大于 480px 时应用该规则 @media screen and (min-width: 480px) { .header { background: red; } } // 屏幕尺寸小于 800px 时应用该规则 @media screen and (max-width: 800px) {}
逻辑操作符:
and or not only
断点的选择(页宽)
自(chao)制(xi)栅格系统
主要抄袭 Bootstrap 和 Layui
为什么要造轮子?栅格系统往往依赖于某个UI框架,但是往往我们不需要那些繁多的组件和样式,只需要一个栅格就够了,鉴于此需求,我自(chao)制(xi)了一套栅格系统
栅格系统用于处理页面多终端适配的问题。栅格的响应式能力,得益于CSS3媒体查询(Media Queries)的强力支持,通常针对四类不同尺寸的屏幕进行相应的适配处理
为什么是12列:因为12的公约数多,是1,2,3,4,6的最小公倍数,相对较灵活。
一、栅格布局规则:
采用 .container(在小屏幕以上的设备中固定宽度) 和 .container-fluid(流体容器,宽度将不会固定,而是 100% 适应)作为布局容器。
采用 row 来定义行,如:
。行必须包含在布局容器中,以便为其赋予合适的排列和内补。
只有列(col)可以作为行(row)的直接子元素
采用类似 col-md-* 来定义一组列,且放在行内。
变量 * 代表的是该列所占用的12等分数值,可选值为 1 - 12。
如果多个列的等分数值总和等于12,则刚好满行排列。如果大于12,多余的列将自动另起一行。
可对列追加类似 col-space-*、 col-md-offset-* 这样的预设类来定义列间距和列偏移。
如果列间距大于30px,请采用列偏移
三、响应式布局心得:
对于排版差异大的区域,写两份代码,大屏的时候隐藏掉小屏的html,小屏的时候隐藏掉大屏的html标签。并且这种情况不应该是常例,如果你经常要写两套,那说明你这个页面可能不太适合写响应式,还不如直接写两套呢。
左右布局变成上下布局,把右边的内容往下面放。
字号、间距变小
*/ /* reset ========================================================================== */ @charset "utf-8"; body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre,dl, dt, dd, ul, ol, li, form, fieldset, lengend, button, input, textarea, th, td { margin: 0; padding: 0; } ul, ol { list-style: none; } a { text-decoration: none; } q:before, q:after { content: ''; } legend { color: #000; } table { border-collapse: collapse; border-spacing: 0; } button, textarea { font-size: 100%; border: 0; } fieldset, img { border: 0; } a:hover { -webkit-transition: all .5s; transition: all .5s; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* common ========================================================================== */ .fl { float: left; *display: inline; _display:inline; } .fr { float: right; *display: inline; _display:inline; } .clearfix:after { display: block; clear: both; content: ''; visibility: hidden; height: 0; } .clearfix { *zoom: 1; } /* 栅格系统,移动设备优先 ========================================================================== */ .container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } .container-fluid { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } .row { margin-left: -15px; margin-right: -15px; } .row:before, .row:after { content: ""; display: table; clear: both; } .hide-xs { display: none!important; } .show-xs-block { display: block!important; } .show-xs-inline { display: inline!important; } .show-xs-inline-block { display: inline-block!important; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; } .col-xs-1 { width: 8.33333333%; } .col-xs-2 { width: 16.66666667%; } .col-xs-3 { width: 25%; } .col-xs-4 { width: 33.33333333%; } .col-xs-5 { width: 41.66666667%; } .col-xs-6 { width: 50%; } .col-xs-7 { width: 58.33333333%; } .col-xs-8 { width: 66.66666667%; } .col-xs-9 { width: 75%; } .col-xs-10 { width: 83.33333333%; } .col-xs-11 { width: 91.66666667%; } .col-xs-12 { width: 100%; } .col-xs-offset-1 { margin-left: 8.33333333%; } .col-xs-offset-2 { margin-left: 16.66666667%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-4 { margin-left: 33.33333333%; } .col-xs-offset-5 { margin-left: 41.66666667%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-7 { margin-left: 58.33333333%; } .col-xs-offset-8 { margin-left: 66.66666667%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-10 { margin-left: 83.33333333%; } .col-xs-offset-11 { margin-left: 91.66666667%; } .col-xs-offset-12 { margin-left: 100%; } @media screen and (min-width: 768px) { .container { width: 750px; } .hide-sm { display: none!important; } .show-sm-block { display: block!important; } .show-sm-inline { display: inline!important; } .show-sm-inline-block { display: inline-block!important; } .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; } .col-sm-1 { width: 8.33333333%; } .col-sm-2 { width: 16.66666667%; } .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.33333333%; } .col-sm-5 { width: 41.66666667%; } .col-sm-6 { width: 50%; } .col-sm-7 { width: 58.33333333%; } .col-sm-8 { width: 66.66666667%; } .col-sm-9 { width: 75%; } .col-sm-10 { width: 83.33333333%; } .col-sm-11 { width: 91.66666667%; } .col-sm-12 { width: 100%; } .col-sm-offset-1 { margin-left: 8.33333333%; } .col-sm-offset-2 { margin-left: 16.66666667%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-4 { margin-left: 33.33333333%; } .col-sm-offset-5 { margin-left: 41.66666667%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-7 { margin-left: 58.33333333%; } .col-sm-offset-8 { margin-left: 66.66666667%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-10 { margin-left: 83.33333333%; } .col-sm-offset-11 { margin-left: 91.66666667%; } .col-sm-offset-12 { margin-left: 100%; } } @media screen and (min-width: 992px) { .container { width: 970px; } .hide-md { display: none!important; } .show-md-block { display: block!important; } .show-md-inline { display: inline!important; } .show-md-inline-block { display: inline-block!important; } .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; } .col-md-1 { width: 8.33333333%; } .col-md-2 { width: 16.66666667%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.33333333%; } .col-md-5 { width: 41.66666667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.33333333%; } .col-md-8 { width: 66.66666667%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.33333333%; } .col-md-11 { width: 91.66666667%; } .col-md-12 { width: 100%; } .col-md-offset-1 { margin-left: 8.33333333%; } .col-md-offset-2 { margin-left: 16.66666667%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-4 { margin-left: 33.33333333%; } .col-md-offset-5 { margin-left: 41.66666667%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-7 { margin-left: 58.33333333%; } .col-md-offset-8 { margin-left: 66.66666667%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-10 { margin-left: 83.33333333%; } .col-md-offset-11 { margin-left: 91.66666667%; } .col-md-offset-12 { margin-left: 100%; } } @media screen and (min-width: 1200px) { .container { width: 1170px; } .hide-lg { display: none!important; } .show-lg-block { display: block!important; } .show-lg-inline { display: inline!important; } .show-lg-inline-block { display: inline-block!important; } .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; } .col-lg-1 { width: 8.33333333%; } .col-lg-2 { width: 16.66666667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.33333333%; } .col-lg-5 { width: 41.66666667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.33333333%; } .col-lg-8 { width: 66.66666667%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.33333333%; } .col-lg-11 { width: 91.66666667%; } .col-lg-12 { width: 100%; } .col-lg-offset-1 { margin-left: 8.33333333%; } .col-lg-offset-2 { margin-left: 16.66666667%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-4 { margin-left: 33.33333333%; } .col-lg-offset-5 { margin-left: 41.66666667%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-7 { margin-left: 58.33333333%; } .col-lg-offset-8 { margin-left: 66.66666667%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-10 { margin-left: 83.33333333%; } .col-lg-offset-11 { margin-left: 91.66666667%; } .col-lg-offset-12 { margin-left: 100%; } }
响应式图片
最后再聊聊响应式图片
一般地,相同的banner,在电脑上需要使用大图,但是手机上面使用小图就好了,不然会造成手机上加载慢浪费流量等问题,响应式图片应运而生。如何实现呢?
1. css3 media query
一个办法是使用backgound-image结合媒体查询,如下所示:
.banner{ background-image: url(/static/large.jpg); } @media screen and (max-width: 767px){ background-image: url(/static/small.jpg); }
这种方法的缺点是对SEO不太友好,因为如果使用img标签还可以写个alt属性。
2. picture标签
picturefill.min.js :解决IE等浏览器不支持 的问题
<picture> <source srcset="banner_w1000.jpg" media="(min-width: 801px)"> <source srcset="banner_w800.jpg" media="(max-width: 800px)"> <img src="banner_w800.jpg" alt=""> </picture> <!-- picturefill.min.js 解决IE等浏览器不支持 <picture> 的问题 --> <script type="text/javascript" src="js/vendor/picturefill.min.js"></script>
如上,如果页面宽度大于800px(PC),则加载大图,而在手机上加载小图。这样写浏览器就只会加载source里面的一张图片。但是如果是用js动态插进去的,它还是会去加载两张,只有写在html里面加载初始化页面的时候才只加载一张。
picture必须要写img标签,否则无法显示,对picture的操作最后都是在img上面,例如onload事件是在img标签触发的,picture和source是不会进行layout的,它们的宽和高都是0。
另外使用source,还可以对图片格式做一些兼容处理:
<picture> <source type="image/webp" srcset="banner.webp"> <img src="banner.jpg" alt=""> </picture>
webp在保持同等清晰度的情况下,体积可以减少一半,但是目前只有Chrome支持,Safari和firefox一直处于实验阶段,所以其它的浏览器如firefox将会加载jpg格式的照片:
3. srcset
<img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt="">
如果屏幕的ppi = 1的话则加载1倍图,而dpi = 2则加载2倍图,手机和mac基本上dpi都达到了2以上,这样子对于普通屏幕来说不会浪费流量,而对于视网膜屏来说又有高清的体验。
如果浏览器不支持srcset,则默认加载src里面的图片。
但是你会发现实际情况并不是如此,在Mac上的Chrome它会同时加载srcset里面的那张2x的,还会再去加载src里面的那张,加载两张图片。顺序是先把所有srcset里面的加载完了,再去加载src的。这个策略比较奇怪,它居然会加载两张图片,如果不写src,则不会加载两张,但是兼容性就没那么好。这个可能是因为浏览器认为,既然有srcset就不用写src了,如果写了src,用户可能是有用的。而使用picture就不会加载两张
相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
以上是详解前端响应式布局、响应式图片,与自制栅格系统的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

PHP与Vue:完美搭档的前端开发利器在当今互联网高速发展的时代,前端开发变得愈发重要。随着用户对网站和应用的体验要求越来越高,前端开发人员需要使用更加高效和灵活的工具来创建响应式和交互式的界面。PHP和Vue.js作为前端开发领域的两个重要技术,搭配起来可以称得上是完美的利器。本文将探讨PHP和Vue的结合,以及详细的代码示例,帮助读者更好地理解和应用这两

WordPress网页错位现象解决攻略在WordPress网站开发中,有时候我们会遇到网页元素错位的情况,这可能是由于不同设备上的屏幕尺寸、浏览器兼容性或者CSS样式设置不当所致。要解决这种错位现象,我们需要仔细分析问题、查找可能的原因,并逐步进行调试和修复。本文将分享一些常见的WordPress网页错位问题以及相应的解决攻略,同时提供具体的代码示例,帮助开

作为一名C#开发者,我们的开发工作通常包括前端和后端的开发,而随着技术的发展和项目的复杂性提高,前端与后端协同开发也变得越来越重要和复杂。本文将分享一些前端与后端协同开发的技巧,以帮助C#开发者更高效地完成开发工作。确定好接口规范前后端的协同开发离不开API接口的交互。要保证前后端协同开发顺利进行,最重要的是定义好接口规范。接口规范涉及到接口的命

Django是一个Python编写的web应用框架,它强调快速开发和干净方法。尽管Django是一个web框架,但是要回答Django是前端还是后端这个问题,需要深入理解前后端的概念。前端是指用户直接和交互的界面,后端是指服务器端的程序,他们通过HTTP协议进行数据的交互。在前端和后端分离的情况下,前后端程序可以独立开发,分别实现业务逻辑和交互效果,数据的交

在前端开发面试中,常见问题涵盖广泛,包括HTML/CSS基础、JavaScript基础、框架和库、项目经验、算法和数据结构、性能优化、跨域请求、前端工程化、设计模式以及新技术和趋势。面试官的问题旨在评估候选人的技术技能、项目经验以及对行业趋势的理解。因此,应试者应充分准备这些方面,以展现自己的能力和专业知识。

如何使用HTML和CSS创建一个响应式轮播图布局在现代的网页设计中,轮播图是一个常见的元素。它能够吸引用户的注意力,展示多个内容或图片,并且能够自动切换。在本文中,我们将介绍如何使用HTML和CSS创建一个响应式的轮播图布局。首先,我们需要创建一个基本的HTML结构,并添加所需的CSS样式。以下是一个简单的HTML结构:<!DOCTYPEhtml&g

Go语言作为一种快速、高效的编程语言,在后端开发领域广受欢迎。然而,很少有人将Go语言与前端开发联系起来。事实上,使用Go语言进行前端开发不仅可以提高效率,还能为开发者带来全新的视野。本文将探讨使用Go语言进行前端开发的可能性,并提供具体的代码示例,帮助读者更好地了解这一领域。在传统的前端开发中,通常会使用JavaScript、HTML和CSS来构建用户界面

当我们同时打开多个窗口时,win7具有将多个窗口以不同方式排列然后同时显示的功能,能够让我们更加清晰地查看到每一个窗口的内容。那么win7窗口排列方式有几种呢,他们分别都是什么样的呢,下面就跟着小编一起来看一下吧。win7窗口排列方式有几种答:三种,分别是层叠窗口、堆叠显示窗口和并排显示窗口。当我们打开多个窗口时,可以右键点击任务栏空白处。就可以看到三种窗口排列方式了。一、层叠窗口:二、堆叠显示窗口:三、并排显示窗口:
