响应式布局
前言:在一些不复杂的页面,只需要在pc端显示,就不需要一些大框架写,但是可以借鉴bootstrap的方法。
1,首先对设备进行媒体查询
@media="only screen and (min-width: 401px) and (max-width: 600px)"
/* 在支持媒体查询的浏览器中等于*/
@media="screen and (min-width: 401px) and (max-width: 600px)"
/*在不支持媒体查询的浏览器中解析到带only的媒体查询时,会将only视为媒体类型。(由于没有only这种媒体类型,因此将不会被应用)*/
media="only"
/*如果不带only,在不支持媒体查询的浏览器中*/
@media="screen and (min-width: 401px) and (max-width: 600px)"
/*将被解析为screen,将会被应用到屏幕类型设备上*/
media="screen"
解析:
@media only screen and (min-width:xxx) and (max-width:xxx) 与 @media screen and (min-width:xxx) and (max-width:xxx) 在支持媒体查询的浏览器中其实是一模一样的,没有任何区别,因为only将被忽略。但是在不支持媒体查询的浏览器中由于没有only这个媒体类型,因此会直接忽略这条媒体查询。在不支持媒体查询的浏览器中,如果不加only,@media screen and (min-width:xxx) and (max-width:xxx)将会被解析为@media screen,明显与期望不一致。因此通过加一个浏览器不认识的媒体类型only则浏览器将会直接忽略这条媒体查询。
通过媒体查询,可以把页面的宽高做一个适应的调整。而使得页面不变形
例如:
/*---------- 媒体查询 ------------*/ @media (max-height: 730px) { .containe { height: 624px !important; } } @media (min-height: 900px) { .containe { height: 900px !important; } } /* -------/ 媒体查询 -------*/
bootstrap的container写法如下:
//媒体小于1200px ,盒子固定为970px;
@media (max-width: 1200px) { .container { width: 970px; } }
//媒体大于1200px,盒子固定为1170px @media (min-width: 1200px) { .container { width: 1170px; } }
而包含在class container 里面的 盒子用 百分比 来划分,且当浏览器小于 1200px,都设为 970px ,这样子就适合一般笔记本了,你可以看一下 bilibili 还有 jd.com。当缩小到一定情况,就固定宽度。这样子在pc端适应问题就解决了。
但是在移动端就不适合这个方法,具体可以借鉴 bootstrap 框架。
2 ,响应式图片
而响应式图片可以借鉴:http://www.runoob.com/css/css-rwd-images.html
其中的一个例子:
响应式视频也是差不多。
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> img {
重点地方 width: 100%; height: auto; } </style> </head> <body> <img src="img_chania.jpg" width="460" height="345"> <p>调整浏览器窗口查看图像是如何扩展的。</p> </body> </html>
另外还可以使用看一下背景图的 background-size: cover background-size: contain;
如果也想适应手机端,请你还是学习 bootstrap 吧
总结:在制作纯适应pc端的网页 媒体查询(固定几个梯度的宽高) + 百分比的 分 格(例如栅栏结构)