标签CSS下的文章

Jerry Bendy 发布于 11月07, 2016

【译】巧用 CSS 变量实现自动前缀

原文 http://lea.verou.me/2016/09/autoprefixing-with-css-variables/

最近,当我在制作 markapp.io 这个小网站的时候,我想出一个巧妙的技巧用在 CSS 变量上,我们可以天然地使用它们的动态本质。让我们看一下当你想使用一个属性,但是这个属性有不同的版本,一个无前缀的标准版和一个或多个有前缀的版本的情形。在这里我举一个例子,比如我们使用clip-path目前需要同时使用无前缀的版本和一个-webkit-前缀的版本,我的这个方法可以适用于这种情况,不管这个 CSS 属性是什么,有多少种前缀,只要它不论什么前缀的值都是同样的就可以。

第一步是在所有元素上定义一个 --clip-path 属性,值是 initial。这样阻止这个属性在每一次使用的时候被继承,而由于 * 没有特异性,任何使用了 --clip-path 的声明都能被覆盖。然后你定义所有不同版本的属性名,值为 var(--clip-path)

* {
  --clip-path: initial;
  -webkit-clip-path: var(--clip-path);
  clip-path: var(--clip-path);
}

这样,在我们需要使用 clip-path 的地方,我们都用 --clip-path 替代,它可以正常工作:

header {
  --clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2.5em), 0% 100%);
}

甚至连 !important 都可以正常工作,因为它影响 CSS 变量的级联。此外,如果由于某些原因你想要明确地设置 -webkit-clip-path,你也可以正常写,这也是因为 * 是零特异性(意味着是最低优先级的选择符——译者注)。这种用法的主要缺点是要求浏览器必须同时支持你使用的属性和 CSS 变量才能正常工作。不过,除了 Edge 之外,所有的浏览器都支持 CSS 变量Edge 也在准备支持它。除了上面这个问题,我没发现其它的缺点了(除了显然必须使用与标准属性有些不同的属性之外),但是如果你有发现别的坑,请在评论里面留言让我知道!

我想,CSS 变量的巧妙用法还有许多有待发掘。我想要知道这个技巧是否能改进一下让它支持自定义 css 属性全写,比如将 box-shadow 分开成 --box-shadow-x--box-shadow-y 等等,但是目前我还没想到好办法。你有好办法吗?😉


本文转自:十年踪迹的博客 英文原文地址:http://lea.verou.me/2016/09/autoprefixing-with-css-variables/

阅读全文 »

Jerry Bendy 发布于 08月10, 2016

CSS 限制文本的行数 —— -webkit-line-clamp 简介

在写网页的时候经常会有需要限制某段文字不能超过多少行的需求, 尤其是在列表中。例如一般标题不应该超过一行、图文混排的区域文本一般不应超过图片的高度(如 5 行)等。

关于只限制一行, 多出来部分显示成省略号的方式可以参考 {% post_link css-text-overflow CSS使行内多出的文字显示成省略号 %}。 这里的主题是 -webkit-line-clamp, 可以限制文本为指定的行数, 超出部分显示为省略号。

先看下效果:

效果

-webkit-line-clamp 目前仍然是一个不规范的属性, 它并没有出现在 CSS 规范草案中。作用是限制一个块级元素显示的文本行数。

为了实现此效果还需要和其它的 CSS 属性组合使用, 如下:

  • display: -webkit-box; 必须结合的属性, 用于将对象作为弹性盒模型显示。
  • -webkit-box-orient 必须结合的属性, 设置或检索弹性盒模型的子元素的排列方式。
  • text-overflow 可以隐藏多出的文本并用省略号代替。

基本语法

-webkit-line-clamp: <number>;

其中, <number> 是块元素显示的文本的行数。

兼容性

来自 CanIUse 的数据显示目前仅有 webkit 内核的浏览器支持此属性, 如 Chrome 、 Safari 、 Opera 、 安卓自带浏览器(安卓2.3以上)、 iOS 自带浏览器(5.1以上) 等。 IE 和火狐并不支持此属性

兼容性

演示

{% jsfiddle ymb3qbcv result,css,html light 100% 400 %}

```css CSS .line-clamp-2 { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.line-clamp-3 { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }


```html HTML
<h3>
限制两行
</h3>

<p class="line-clamp-2">
Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Promise对象。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点。
(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
</p>


<h3>
限制三行
</h3>
<p class="line-clamp-3">
Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Promise对象。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点。
(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
</p>

<p><small>注* 文本内容摘自阮一峰老师的 《<a href="http://es6.ruanyifeng.com/#docs/promise" target="_blank">ECMAScript 6 入门</a>》</small></p>

阅读全文 »

Jerry Bendy 发布于 12月20, 2015

仅用一个DIV和CSS绘制中国国旗

看了国外一个网站使用一个DIV绘制图形的例子,想到也试着用一个DIV画一面中国国旗吧,于是便动手试了下。当然因为文字投影没办法旋转的原因,四颗小星星不能做到指向中心的大星星,还是有些BUG的。以下是实现效果:

 

下面是使用的HTML代码,外层的DIV仅仅是后面的背景,请无视。

    <div id="flag">
        <div></div>
    </div>

CSS代码:

#flag {
    width: 600px;
    height: 400px;
    background: #898989;
    margin: 0 auto;
    position: relative;
}

#flag div {
    position: absolute;
    left: 75px;
    top: 50px;
    background: #f00;
    background: -webkit-linear-gradient(-45deg, #ff0000 0%,#d60000 18%,#ff0000 41%,#d30000 68%,#ff0000 100%);
    background: linear-gradient(135deg, #ff0000 0%,#d60000 18%,#ff0000 41%,#d30000 68%,#ff0000 100%);
    width: 450px;
    height: 300px;
    box-shadow: 4px 4px 8px rgba(0,0,0,.4);
}

#flag div:before {
    content: "★";
    position: absolute;
    color: #ffff37;
    font-size: 90px;
    left: 33px;
    top: 37px;
}

#flag div:after {
    content: "★";
    position: absolute;
    color: #ffff37;
    font-size: 33px;
    left: 140px;
    top: 18px;
    text-shadow: 33px 36px 0 #ffff37,
                33px 82px 0 #ffff37,
                0 115px 0 #ffff37;
}

目前使用text-shadow的方案似乎是解决不了星星旋转角度的问题的,如果抛开仅用一个DIV的限制,倒可以轻轻松松的使用transform完成旋转。

阅读全文 »

Jerry Bendy 发布于 06月05, 2015

使用JavaScript检测浏览器支持哪种CSS动画完成事件

以前或许我们在做前端效果时都是在使用JS来,如JQuery的animate,而如今在前端效果中,CSS3占据越来越重要的作用,如何检测一个CSS3的动画是否结束并在结束后执行下一个动画呢?

用jQuery的时候可能是这样:

$('.element').animate({left: '100px'}, function(){
    alert('动画执行结束');
});

下面以一个简单的例子演示下使用CSS3的动画如何响应这种操作:

/* 一个简单的CSS3动画(这里不再写 -webkit- 之类的前缀了 */
@keyframes fade{
    from {left: 0;}
    to {left: 200px;}
}

.animate-fade{
    animation: fade 2s ease both;
}

使用 jQuery 操作(假设浏览器是webkit内核)

$('.element').addClass('animate-fade').on('webkitAnimationEnd', function(){
    alert('动画执行结束');
});

好吧,其实上面代码中的webkitAnimationEnd部分才是本文要说的重点。因为目前不同的浏览器对HTML5和CSS3的支持不尽相同,很多CSS3样式不同内核的浏览器也有不同的前缀,同样,不同浏览器也支持不同的动画结束事件。

下面的代码演示了如何判断用户的浏览器支持哪一种动画结束事件,并返回。其基本原理是创建一个简单的DOM对象,并判断事件是否在DOM对象内存在。

// 判断animationEnd事件
function detectAnimationEndEvents(){
    var t;
    var el = document.createElement('fakeelement');
    var animEndEventNames = {
      'WebkitAnimation' : 'webkitAnimationEnd',
      'OAnimation' : 'oAnimationEnd',
      'msAnimation' : 'MSAnimationEnd',
      'animation' : 'animationend'
    };

    for(t in animEndEventNames){
        if( el.style[t] !== undefined ){
            return animEndEventNames[t];
        }
    }
}

var animEndEventName = detectAnimationEndEvents();

// 判断transitionEnd事件
function detectTransitionEvents(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

var transitionEventName = detectTransitionEvents();

以上代码返回支持的动画结束事件的名称,直接用on就OK啦

阅读全文 »

Jerry Bendy 发布于 01月23, 2015

在前端使用和编译LESS

做前端的应该都会知道LESS,使用LESS书写CSS样式可以在很大程序上降低工作量以及由拼写造成的错误,但对新手来说除了LESS的语法外,如何在自己的工作环境上用上LESS可能也是个问题。

个人认为,使用LESS最简单的方法就是实时编译:即对LESS文件做的修改可以在不额外加任何操作(编译)的情况下应用在测试环境甚至生产环境,毕竟对LESS文件每做一点小修改都要重新编译一次也太麻烦了些,而且很慢。

实时编译有两种方法:一是在HTML中引入less.js文件,并且设置工作环境是“development”,这样在网页每次载入时都会重新编译LESS文件;二是使用某些编辑器,如Sublime Text,Sublime Text有几个插件可以在保存LESS文件的时候自动编译这个文件。

使用less.js

使用less.js(即官网上说的客户端用法)需要先下载less.js文件,Github地址:https://github.com/less/less.js,文件在 dist 目录内。 less.min.js是其压缩版本。

客户端用法是在开发时最方便的一种方法,但不适用于生产环境,因为每次打开页面都需要编译所以性能会比较差。

使用less.js需要把引入CSS的rel属性改成 “stylesheet/less”,并且引入less.js文件:

<link rel="stylesheet/less" type="text/css" href="styles.less" />

<script src="less.js" type="text/javascript"></script>

必须要保证你的JS是在LESS文件之后导入的,建议只导入一个LESS文件,其它文件可以在LESS文件内通过@import "xxx.less";的方式导入。

可以为less.js指定某些编译选项,这些选项应该在less.js文件导入之前:

<!-- 在导入less.js之前设置参数 -->
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js" type="text/javascript"></script>

其中的env支持两个参数,即developmentproduction,development为开发环境,每次刷新页面都会重新编译LESS;production是生产环境(不建议在生产环境使用less.js),系统会将编译生成的CSS样式存储在浏览器的LocalStorage中,下次使用不会再重新编译。

dumpLineNumbers可以帮你快速在LESS文件中定位到错误的位置。

在Sublime Text中使用LESS

因为我一般是使用第一种方法,所以这个方法我了解的也不多。

首先在ST中安装“LESS”插件,可以打开LESS文件的代码高亮功能。

ST中编译LESS需要安装Node及lessc,安装Less2CSS插件可以“工具”->“编译系统”中多出一个LESS的选项,选中它,点击“工具”->“编译”即可把LESS文件编译成同名的CSS文件。

把编译LESS加入Windows右键菜单

此方法与ST中类似,只不过是把编译放进了Windows的右键菜单,而不是ST的编译命令中。

首先还是需要安装Node和lessc,确保在cmd中输入“lessc”可用。

创建一个批处理文件命名为“makeless.bat”,内容如下:

@echo off
cd /d %~dp1
lessc %1 > %~n1.css

把该文件移到系统的windows目录下,打开注册表编辑器。

定位到“HKEY_CLASSES_ROOT.less”,不存在请新建,如已存在需要查找默认值的名称,并在HKEY_CLASSES_ROOT中定位它。

创建或打开“shell\”项,新建子项“make”,默认项改为“编译LESS”;

创建子项“command”,默认项改为makeless.bat "%1",引号不可省略。

(啰嗦一大堆其实就是基本的右键菜单操作方法)

然后在所有.less文件的右键菜单中就会出现“编译LESS”的命令,点击之将会在当前目录中生成与LESS文件同名的css文件(如果编译出错的话错误信息也会输出到这个CSS文件中)

阅读全文 »

Jerry Bendy 发布于 09月12, 2014

了解CSS中单位px、em和rem的区别

1505196wwz21kmjckgk22k

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?

PX特点

  1. IE无法调整那些使用px作为单位的字体大小;
  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
  3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

EM特点

  1. em的值并不是固定的;
  2. em会继承父级元素的字体大小。

所以我们在写CSS的时候,需要注意以下几点:

  1. body选择器中声明Font-size=62.5%;
  2. 将你的原来的px数值除以10,然后换上em作为单位;
  3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

rem特点

rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是

一个例子:

p {font-size:14px; font-size:.875rem;}

注意:

选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

在这里为大家提供一个px,em,rem单位转换工具

地址:http://pxtoem.com/

20140913002919

 

http://www.cnblogs.com/leejersey/p/3662612.html

阅读全文 »

Jerry Bendy 发布于 01月28, 2014

让IE也支持CSS3 Media Query

做网站都知道IE9以下是不支持CSS3的Media Query的,也就意味着响应式布局在低版本IE中无法实现,这样一来响应式设计的页面在IE下就可能会出现各种排版错误或横向滚动条,十分影响美观。而解决方法除了写CSS的时候以一个默认尺寸(一般为1024或1366)为基础来进行CSS Query,这样当IE识别不了Query的内容时就可以以默认尺寸展示。当然,在这里提供另一个解决方案:使用JS替代的实现Media Query。

这一类的JS有很多,我今天要介绍的是一款叫Respond.js的软件。

Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计(Responsive Web Design)。

测试页面

Github地址

Github源码中的文件会比较多,使用的话只需要下载“dest”目录下的“respond.min.js”即可。调用时只需在你的HTML的Head部分加入以下代码:

<!--[if lt IE 9]>
    <script src="js/respond.min.js" type="text/javascript"></script>
<![endif]-->

剩下的事情就交给Respond来完成啦!

@media (min-width:300px){
    body{background:#000;}
}
@media (min-width:700px){
    body{background:#F00;}
}
@media (min-width:1000px){
    body{background:#0F0;}
}

respond

阅读全文 »

Jerry Bendy 发布于 12月28, 2013

JQuery在所有图片加载完成后执行 & 图片的垂直居中

这两天没事的时候在做个小Tab页面玩玩,纯粹是做着玩,用来做为自己的主页方便打开各个自己常用的页面。在写HTML/CSS的时候遇到的最大的一个问题就是如何令图片在其父元素内垂直居中,因为父元素的高度固定宽度自适应,而且图片的宽高全部未知,max-width和max-height是90%,在网上找了好多资料,包括Display成table和table-cell都不能完美实现,最后只能尝试着使用JQuery动态来解决了。

思路很简单,就是在网页加载完成后去判断图片的高度和其父容器的高度,用父容器的高度减去图片高度再除以2得到其Top值(需要提前把图片的position设为relative),再用JQ的CSS方法设置Top值即可,部分代码如下:

HTML(使用Bootstrap3.0):

<div class="col-xs-4 col-md-2">
   <p>
      <img class="favicon" src="http://www.google.com/s2/favicons?domain_url=http://www.icewingcc.com" />
          冰翼博客
    </p>
    <div class="thumb-box">
          <a href="http://www.icewingcc.com" class="thumbnail" target="_blank">
             <img src="data/baidu.png" />
        </a>
    </div>
</div>

CSS(重写Bootstrap的部分):

.thumbnail {
    height:120px;
}

.thumbnail>img, .thumbnail a>img {
    display:block;
    max-width:90%;
    max-height:90%;
    position:relative;
}

a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active {
    background-color:rgba(216, 236, 253, 0.71);
}

在写Javascript的时候遇到一个问题:总是有不固定的一两个网站的LOGO的高度返回0,后来仔细查看发现是JQuery代码在网页加载完成后执行,而这个时候有些图片还没有加载完成,所以无法取得这个图片的高度,自然就会返回0。拿着这个问题又是一阵百度Google,也有说用image对象的onload方法什么的,最后发现下面的方法还是挺好用的:

JS:

$(window).on('load',function(){
        $('.thumbnail').each(function(){
            imgheight = $(this).children('img').height();
            divheight = $(this).height();
        $(this).children('img').css('top',(divheight-imgheight)/2);
        });
});

备注(2014-01-03):

上面的JS代码在实际使用的时候出了问题,当图片比较多时就无法正确加载了,于是不得不去寻找新的方法。

因为函数是要在图片加载完成时才能执行的,所以Lazyload很适合。直接在网上下载JQuery Lazyload插件,并修改以下代码。

图片部分:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-original="图片地址" />

这里我使用了一个1象素的GIF图像的代码作为默认图片,实际可以根据自己需要换成别的图片地址甚至动态图片;把原来的图片地址写在“data-original”里面。

JS部分:

$('.thumbnail img').lazyload({
    effect:"fadeIn",
    load:function(){
        imgheight = $(this).height();
        divheight = $(this).parent().height();
        $(this).css('top', (divheight-imgheight)/2);
    }
});

关于Lazyload的简单使用方法网上有很多,我也打算再写一篇,在这里只需要知道effect是动态效果,而图片加载完成时的回调函数写在load里面即可。

阅读全文 »

Jerry Bendy 发布于 10月20, 2013

CSS3 Media Queries实现响应式网页设计

在页面的头部调用独立的样式表

一、最大宽度Max Width

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

上面表示的是:当屏幕小于或等于600px时,将采用small.css样式来渲染Web页面。

二、最小宽度Min Width

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />

上面表示的是:当屏幕大于或等于900px时,将采用big.css样式来渲染Web页面。

三、多个Media Queries使用

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

Media Query可以结合多个媒体查询,换句话说,一个Media Query可以包含0到多个表达式,表达式又可以包含0到多个关键字,以及一种Media Type。正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。

四、设备屏幕的输出宽度Device Width

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

上面的代码指的是iphone.css样式适用于最大设备宽度为480px,比如说iPhone上的显示,这里的max-device-width所指的是设备的实际分辨率,也就是指可视面积分辨率

五、iPhone4

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

上面的样式是专门针对iPhone4的移动设备写的。

六、iPad

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

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />

在大数情况下,移动设备iPad上的Safari和在iPhone上的是相同的,只是他们不同之处是iPad声明了不同的方向,比如说上面的例子,在纵向(portrait)时采用portrait.css来渲染页面;在横向(landscape)时采用landscape.css来渲染页面。

七、android

/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

/*360px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />

/*480px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

我们可以使用media query为android手机在不同分辨率提供特定样式,这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。

八、not关键字

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

not关键字是用来排除某种制定的媒体类型,换句话来说就是用于排除符合表达式的设备。

九、only关键字

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

only用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有:支持媒体特性(Media Queries)的设备,正常调用样式,此时就当only不存在;对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备,这样就会不读了样式,因为其先读only而不是screen;另外不支持Media Qqueries的浏览器,不论是否支持only,样式都不会被采用。

十、其他 在Media Query中如果没有明确指定Media Type,那么其默认为all,如:

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

另外还有使用逗号(,)被用来表示并列或者表示或,如下

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

上面代码中style.css样式被用在宽度小于或等于480px的手持设备上,或者被用于屏幕宽度大于或等于960px的设备上。

CSS文件中@media引入

使用max-width

@media screen and (max-width: 600px) {
    /* CSS Styles */
}

使用min-width

@media screen and (min-width: 900px) {
    /* CSS Styles */
}

max-width和min-width的混合使用

@media screen and (min-width: 600px) and (max-width: 900px) {
    /* CSS Styles */
}

同时CSS3 Media Queries还能查询设备的宽度“device-width”来判断样式的调用,这个主要用在iPhone,iPads设备上,比如像下面的应用: iPhone和Smartphones上的运用

/* iPhone and Smartphones (portrait and landscape) */
@media screen and (min-device-width : 320px) and (max-device-width: 480px) {
    /* CSS Styles */
}

max-device-width指的是设备整个渲染区宽度(设备的实际宽度),而 max-width 指的是可视区域分辨率。 iPad上的运用

/* iPads (landscape) */
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    /* CSS Styles */
}
/* iPads (portrait) */
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    /* CSS Styles */
}

针对移动设备的运用,如果你想让样式工作得比较正常,需要在“”添加“viewport”的meta标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

上面针对不同的分辨率,不同的移动设备类型做了不同定义,可能我们在实际的使用中用不着这么详细的去区分不同的设备。 比如针对电脑访问的就制定一个大于800到1280,超过1280的,就显示一个大分类的样式。 移动端访问的,设置小于320的,320-480的,480-800的等等。 目前很多wordpress主题实现是一个主题兼容小屏手机到大屏电脑,虽然这种精神还是值得嘉奖的,但是方式却是不怎么可取的。 所谓的支持小屏手机,更多的是调整排版布局,但是其实很多元素其实并不适合在手机等小屏上展示,那样的交互也并不友好。为移动设备优化了样式表并不意味着你的网站就适合在移动设备显示了。要做到真正的移动设备优化,要削减图像大小、缩减手机上不必展示的元素和加载的资源尺寸等等。CSS3 Media Queries 是用于设计的呈现,而不是优化。 所以,通过CSS3 Media Queries再去定制真正的移动样式才是应该去做的。

转自:威言威语

阅读全文 »

Jerry Bendy 发布于 10月18, 2013

CSS使行内多出的文字显示成省略号

在使用HTML+CSS排版的时候经常出遇到一个问题:某一行内容的长度无法确定,而网页上留的空间就那么大,如果字符过多就会影响排版;单纯的使用overflow:hidden来截断字符串又会给人一种段落(或标题)已经结束的错觉。

最好的方法就是如上图那样,在将要超出区域的前几个字符变成省略号,后面的全隐藏了。下面就说一下用CSS的实现方法,只需要三行,上代码:

p {
   white-space:nowrap;
   text-overflow:ellipsis;
   overflow:hidden;
}

其中,wite-space:nowrap规定当文本内容一行显示不完时不换行;

text-overflow:ellipsis规定当文本超出时显示省略号而不是简单的裁切;

overflow:hidden规定内容超出区域时裁切。

阅读全文 »