标签：back highlight 屏幕 nbsp -- css 扩展 期望 窗口
前言：在一些不复杂的页面，只需要在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端的网页 媒体查询(固定几个梯度的宽高) + 百分比的 分 格（例如栅栏结构）
标签：back highlight 屏幕 nbsp -- css 扩展 期望 窗口
原文地址：https://www.cnblogs.com/xixiaijunjun/p/10604116.html
