收集贴：一些有趣且好用的CSS样式表

教程

01）最高优先级的移动设备默认样式

在设置安装按钮样式时，在浏览器打开模拟器查看效果时，一切都很美好，当上传后使用真机打开，只想说这是什么鬼？跟浏览器模拟的完全是两个东西…，检查了每一行CSS，换了各种浏览器测试，也找不到问题所在；甚至都使用【Chrome-devtools：对ios-safari移动端的H5页面进行调试（ios-webkit-debug-proxy）】同样没发现问题，顺便说一句，Chrome-devtools 这个调试真香~

突然想到会不会是手机自带的默认样式导致的问题，然后谷歌一下，还TM真是！引用原话：

在移动设备中，各浏览器为一些基本控件（button，checkbox，scrollbarbutton-up）提供了一套符合原生系统界面风格的样式，这些样式是隐藏的，但优先级却是最高的，高到你即使使用禁术 !important 也无法超越。

通俗点讲就是手机自带一套样式（可能是防止某些网站样式太丑吧？），并且优先级为最高，把你自己设置的样式注释了，同时自带样式是隐藏的，让你无法发现问题！！！

只要发现问题了，就肯定有解决办法！

-webkit-appearance: none;
/*-- 用来取消基于 Webkit （如 Safari）和 Blink（如Chrome，Opera）引擎的浏览器所提供的原生系统控件样式； --*/

-moz-appearance: none;
/*-- 用来取消基于 Gecko 引擎的浏览器（如Firefox）所提供的原生系统控件样式； --*/

这两条样式声明等于告诉浏览器不要使用默认的样式，用我们自己设置的样式，当然 appearance 还有更多属性
MDN：-moz-appearance (-webkit-appearance, appearance)
CSS-Tricks：appearance

02）利用@media screen实现网页布局的自适应（响应式布局）

关于@media screen的文章百度谷歌一大堆，就不废话了，仅把看到的有用的内容做下记录；

在CSS中添加@media screen属性，判断浏览器宽度并输出不同的长宽值

第一步：设置Meta标签

首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  • width = device-width：宽度等于当前设备的宽度
  • height = device-height：高度等于当前设备的高度
  • initial-scale：初始的缩放比例（默认设置为1.0）
  • minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
  • maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
  • user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
第二步：加载兼容文件JS

因为 IE8 既不支持 HTML5 也不支持 CSS3 Media，所以我们需要加载两个 JS 文件，来保证我们的代码实现兼容效果：

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

当然如果速度较慢或无法加载，也可以下载到本地引用：点击下载Js文件

第三步：设置IE渲染方式默认为最高（非必要）

保持 IE 的文档模式永远都是最新的，同时如果用户电脑有安装 Google Chrome Frame谷歌浏览器內嵌框架 插件，就能让用户电脑 IE 不管是哪个版本的都可以使用 Webkit引擎 及 V8引擎 进行排版及运算，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
第四步：Media写法

举例

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

上面这段 CSS 代码意思是：当页面小于 960px 的时候执行它下面的CSS，也就是执行 body{background: #000;}，代码中的 screen 作用是告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体，但如果你的网站不需要打印，可以省略（多数网站是这样做的）：

@media (max-width: 960px){
    body{
        background: #000;
    }
}
4.1、CSS2 中 Media用法（可略过）

如果是在 CSS2 中使用 Media，就需要在 HTML 页面的 head 标签中插入如下的一段代码：

<link rel="stylesheet" type="text/css" media="screen" href="style.css">

上面其实是 CSS2 实现的衬线用法，如果我们想知道现在的移动设备是不是纵向放置的显示屏，可以这样写：

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

我们把第一段的代码也用 CSS2 来实现，让它一样可以让页面宽度小于 960px 时执行指定的样式文件：

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

虽然 CSS2 可以实现这个效果，但是会增加页面 http 的请求次数，增加了页面负担，所以最好是用 CSS3 把样式都写到一个文件中！

4.2、接着说 CSS3 Media

上面第一段代码是小于 960px 尺寸的写法，然后下面是等于 960px 尺寸的代码：

@media screen and (max-device-width:960px){
    body{
        background:red;
    }
}

然后是尺寸大于 960px 的代码：

@media screen and (min-width:960px){
    body{
        background:orange;
    }
}

然后混合一下，当页面宽度大于 960px 小于 1200px 的时候执行下面 CSS 的代码：

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}
Media参数汇总

以上就是我们最常需要用到的媒体查询器的三个特性，大于，等于，小于的写法，当然媒体查询器的全部功能肯定不止这三个功能，其他参数：

  • width:浏览器可视宽度。
  • height:浏览器可视高度。
  • device-width:设备屏幕的宽度。
  • device-height:设备屏幕的高度。
  • orientation:检测设备目前处于横向还是纵向状态。
  • aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
  • device-aspect-ratio:检测设备的宽度和高度的比例。
  • color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
  • color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
  • monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
  • resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
  • grid：检测输出的设备是网格的还是位图设备。
注意

举例：如果你把 @media (min-width: 768px) 写在了下面，那么 min-width: 1200 会失效

/* 错误写法举例 */
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }

因为如果页面是 1440 ，由于 1440>768，那么你的 1200 就会失效，所以我们用 min-width 时，小的放上面大的在下面：

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }

同理如果是用 max-width 那么就是大的在上面，小的在下面：

@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

更多样式尺寸

1280分辨率以上（大于1200px）

@media screen and (min-width:1200px){
    #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px}
}

1100分辨率（大于960px，小于1199px）

@media screen and (min-width: 960px) and (max-width: 1199px) {
    #page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px}
}

880分辨率（大于768px，小于959px）

@media screen and (min-width: 768px) and (max-width: 959px) {
    #page{ width: 900px; }#content,.div1{width: 620px;}#secondary{width:220px}select{max-width:180px}
}

720分辨率（大于480px，小于767px）

@media only screen and (min-width: 480px) and (max-width: 767px){
    #page{ width: 450px; }#content,.div1{width: 420px;position: relative; }#secondary{display:none}#access{width: 450px; }#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none}
}

440分辨率以下（小于479px）

@media only screen and (max-width: 479px) {
    #page{ width: 300px; }#content,.div1{width: 300px;}#secondary{display:none}#access{width: 330px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px}
}

竖屏

@media screen and (orientation: portrait) and (max-width: 720px) { 对应样式 }

横屏

@media screen and (orientation: landscape) { 对应样式 }

常见 PC端 屏幕尺寸及 CSS
1024、1280、1366、1440、1680、1920

/*>=1024的设备*/
@media (min-width: 1024px){
  body{font-size: 18px}} 
} 
@media (min-width: 1100px) {
  body{font-size: 20px}

@media (min-width: 1280px) {
  body{font-size: 22px;}
} 

@media (min-width: 1366px) {
  body{font-size: 24px;}
}  

@media (min-width: 1440px) {
  body{font-size: 25px !important;}
} 

@media (min-width: 1680px) {
  body{font-size: 28px;}
} 

@media (min-width: 1920px) {
  body{font-size: 33px;}
}

03）定义下级标签样式

大多时候一个页面有多个相同的标签，每个标签内又包含多个子标签，如何做到通过给父级标签添加css类来控制多个子标签，同时不影响页面上其他相同标签，以防以后自己都看不懂，还是举例吧

	<table>
		<td>
			<img></img>
		</td>
		<td>
			<img></img>
		</td>
	</table>
	<table>
		<td>
			<img></img>
		</td>
	</table>

如上，我想设置第一个table标签里的图片宽度为50%，但是第一个table标签内有多个图片，每一个都单独设置很麻烦，同时还不能影响第二个table里的图片，所以不能直接设置img {width: 50%;}，所以可以这样设置

	<table class="css01">
		<td>
			<img></img>
		</td>
		<td>
			<img></img>
		</td>
	</table>
	<table>
		<td>
			<img></img>
		</td>
	</table>
.css01 img {
  width: 50%;
}

这样就实现了只对第一个table标签内的所有图片设置宽度50%，且不需要单独对每个img标签添加css类，同时还不影响页面上的其他img标签

04）宽高百分比再增减固定宽高

有时候我们需要设置标签（比如div）的百分比宽度或者高度，但同时又需要再增加一点点或者减少一点点固定宽高，可以使用此样式

height:calc(100% - 20px);

此样式表示，高度100%减20px，其他以此类推，比如

height:calc(100% + 20px);
min-height: calc(100% - 20px);
max-height: calc(100% - 20px);
width:calc(100% + 20px);
width:calc(100% - 20px);
min-width: calc(100% - 20px);
max-width: calc(100% - 20px);
....

05）网格容器布局

.css {
    padding-left: 0;
    padding-right: 0;
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    grid-gap: 12px;
}
<div class="css">
	<a></a>
	<a></a>
	<a></a>
	<a></a>
	<a></a>
	<a></a>
</div>

表示div内6个内容块宽度自适应填充，超过6个内容块自动换行，每个内容块间距12px

本文部分内容转载自：
https://blog.csdn.net/weixin_33830216/article/details/88010700
https://blog.csdn.net/gtlishujie/article/details/81975157
http://www.cnblogs.com/xcxc/p/4531846.html
http://www.cnblogs.com/zhaodifont/p/3858657.html
http://www.bubuko.com/infodetail-1045273.html

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注