响应式布局

 

前言:在一些不复杂的页面,只需要在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端的网页     媒体查询(固定几个梯度的宽高)     +       百分比的 分 格(例如栅栏结构)    

 

posted @ 2019-03-26 21:58  莫子诗里  阅读(201)  评论(0编辑  收藏  举报