填坑:CSS之移动设备默认样式 / @media screen自适应 / 定义下级标签

由于本站之前使用的应用分发系统(仿fir.im 应用分发,也就是非官方版)存在严重的安全问题,已经弃用,具体什么问题就不说了,如果还有使用这套系统的站长和个人用户请小心谨慎!所以想自己折腾一个简单的应用分发系统;

本文仅记录下在折腾这套系统前端时遇到的两个坑,防止本人以后再次踩坑!

一)最高优先级的移动设备默认样式

在设置安装按钮样式时,在浏览器打开模拟器查看效果时,一切都很美好,当上传后使用真机打开,只想说这是什么鬼?跟浏览器模拟的完全是两个东西…,检查了每一行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


二)利用@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;}
} 

二)定义下级标签样式

大多时候一个页面有多个相同的标签,每个标签内又包含多个子标签,如何做到通过给父级标签添加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标签


本文部分内容转载自:
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

发表评论

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