您的位置:新葡亰496net > 新葡亰官网 > 变量让你轻松制作响应式网页,响应式Web设计实

变量让你轻松制作响应式网页,响应式Web设计实

发布时间:2019-10-30 17:49编辑:新葡亰官网浏览(61)

    变量让你轻松制作响应式网页,响应式Web设计实战总结。CSS 变量让你轻松制作响应式网页

    2018/03/07 · CSS · 响应式

    原文出处: Per Harald Borgen   译文出处:白吟灵   

    新葡亰496net 1

    如果你之前没有听说过CSS变量,那么现在我将告诉你:它是CSS的新特性,让你能够在样式表中使用变量的能力,并且无需任何配置。
    实际上,CSS变量能够让你改变以往设置样式的老方法:

    h1{ font-size:30px; } navbar > a { font-size:30px; }

    1
    2
    3
    4
    5
    6
    h1{
        font-size:30px;
    }
    navbar > a {
        font-size:30px;
    }

    而使用了CSS变量之后:

    :root { --base-font-size: 30px; } h1 { font-size: var(--base-font-size); } navbar > a { font-size: var(--base-font-size); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    :root {
      --base-font-size: 30px;
    }
    h1 {
      font-size: var(--base-font-size);
    }
    navbar > a {
      font-size: var(--base-font-size);
    }

    这样的词法有点奇怪,但它确实能够让你通过仅改变--base-font-size的值来改变app中所有原生的字体大小。

    如果你想要学习CSS变量的知识,可以登录Scrimba看我的视频课程,或是阅读我在Medium上写的文章:如何学习CSS变量。

    好了,现在让我们看看如何使用这个新知识来更加简单地制作响应式站点吧。

    本文作者: 伯乐在线 - 追梦子 。未经作者许可,禁止转载!
    欢迎加入伯乐在线 专栏作者。

    CSS Grid VS Flexbox:实例对比

    2017/04/21 · CSS · Flexbox, Grid

    原文出处: Danny Markov   译文出处:IT程序狮   

    新葡亰496net 2

    • DEMO 地址:【传送门】
    • 示例下载地址: 【传送门】

    不久以前,所有 HTML 页面的布局还都是通过 tables、floats 以及其他的 CSS 属性来完成的。面对复杂页面的布局,却没有很好的办法。

    然而Flexbox的出现,便轻松的解决了复杂的 Web 布局。它是一种专注于创建稳定的响应式页面的布局模式,并可以轻松地正确对齐元素及其内容。如今已是大多数 Web 开发人员首选的 CSS 布局方式。

    现在,又出现了一个构建 HTML 最佳布局体系的新竞争者。(冠军头衔正在争夺中…)它就是强大的CSS Grid布局。直到本月月底,它也将在Firefox 52和Chrome 57上得到原生支持,相信不久也会得到其他浏览器兼容性的支持。

    响应式Web设计实战总结

    2015/05/15 · HTML5 · 响应式

    原文出处: 涂根华的博客   

     响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整。具体的实践方式由多方面组成,包括弹性网格和布局,图片,css Media(媒体查询)使用等。

    一:布局方式有如下几种:

    1. 固定布局:固定布局以PX(像素)作为单位的,在PC端,设计稿多少PX就写多少PX,前几年都是这种布局,常见的是以960px或者1000px来设计的,但是这样设计有如下缺点:

    1.页面很死板,在更大的屏幕上,页面左右2边留白。

    1. 不适应响应性布局。

     2.  流式布局:流式布局是以百分比作为单位的,我们要牢记如下公式:

    百分比宽度 = 目标元素宽度 / 上下文元素宽度

    这种布局优点:可以自适应布局,根据不同的分辨率显示不同的宽度。

    缺点:在行高或者marginTop在大屏幕下看起来太高,在小屏幕下看起来太窄。

      弹性布局:弹性布局是以em作为单位的,同样弹性布局也支持如下公式:

    百分比尺寸 = 目标元素尺寸 / 上下文元素尺寸

    使用em将文字像素px转换为相对单位,现在浏览器默认文字的大小是16px,如果一个文字大小是48px,上下文元素是(浏览器),那么转换成em 就是 48/16 = 3em. 但是如果一个h1标签的font-size是48px, h1标签内部span标签font-size 是24px,那么h1标签的font-size = 48 / 16 = 3em  h1 span {font-size = 24/48 =0.5em}.弹性布局也支持响应性web设计。

    二: 媒体查询:

    根据特定的环境查询各种属性值,比如设备的宽度,是否横向使用不同的css样式来渲染。

    媒体查询使用如下:比如内联样式可以如下写:

    1. 最大宽度960px一种布局:

    @media screen and (max-width:960px) {}

    1. 最小宽度600px 另一种布局:

    @media screen and (min-width:600px) {}

    1. 宽度在600px 到 960px之间,如下:

    @media screen (min-width:600px) and (max-width:960px) {}

    外联样式使用link标签来引用样式:

    XHTML

    <link rel=”stylesheet” href=”xx1.css” media=”screen and (max-width:960px)”/> <link rel=”stylesheet” href=”xx1.css” media=”screen and (min-width:600px)”/> <link rel=”stylesheet” href=”xx1.css” media=”screen and (min-width:600px) and (max-width):960px”/>

    1
    2
    3
    <link rel=”stylesheet” href=”xx1.css” media=”screen and (max-width:960px)”/>
    <link rel=”stylesheet” href=”xx1.css” media=”screen and (min-width:600px)”/>
    <link rel=”stylesheet” href=”xx1.css” media=”screen and (min-width:600px) and (max-width):960px”/>

    如果对于像ipad来说,我们可以在上面增加一个属性 orientation(landscape或portrait) 横屏或者竖屏。

    理解meta各个属性的含义:

    做h5页面移动端开发需要在head标签内引入下面这句话。(如果没有引入的话,页面的字体等大小就不正常了)。

    <meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no” />

    具体含义如下:

    1. Width: 控制viewport的大小。如device-width为设备的宽度。
    2. Height: 和width相对应,指定高度。
    3. initial-scale: 初始缩放比例,页面第一次加载时的缩放比例。
    4. maximum-scale 允许用户缩放到的最大比例,范围从0到10.0
    5. minimum-scale: 允许用户缩放到的最小比例,范围从0到10.0
    6. user-scalable: 用户是否可以手动缩放,值可以是:

    1,  yes,true允许用户缩放;

    2,  no、false不允许用户缩放。 (只设置这一个属性,有的浏览器并不生效,我们需要配合maxinum-scale和mininum-scale最大缩放                与最小缩放分别为1:1)。

    想深入理解meta及viewport各个属性,可以看 “无双” 下面这篇博客讲的非常详细。如下:

    综合:流式布局和弹性布局及配合媒体查询 是 响应性布局的最好方式。

    但是针对响应性web布局使用媒体查询也有缺点的,缺点如下:

    对于设计师:要针对不同的屏幕大小设计不同的设计,(例如宽屏下的三栏设计、普通屏幕下的两栏设计以及移动设备上的单栏设计等)。对于前端对于不同的屏幕要写不同的样式,增加了工作量,同时维护起来不是很方便(要维护几份不同的css)。

    三:图片

    1. 对于背景图片来说,css3有个属性 background-size可以等比例缩放缩放背景图片。

    但是对于小屏幕的移动设备去加载大背景图片的话,有缺点的,最主要的缺点是要更大的带宽,浪费流量。所以我们要想做的更好的话,可以使用媒体查询根据设备的宽度来         渲染不同大小的背景图片。

    2. 对于页面上的<img/>标签图片的话:

    1. 如果只是页面上静态图片的话,不考虑带宽的情况下,可以使用width=”100%”等比例缩放,如:<img src=”XX.png” width=”100%”/>

    2. 如果是商品图或者页面上有多个的话,考虑不浪费不必要的带宽,需要后台根据不同的设备宽度大小来返回不同的json数据的图片来给我们前端,之后我们前端使用JS动态的渲染出来。

    在现代浏览器中(包括IE7 )中要实现图片随着流动布局相应缩放非常简单,只需要在css中加上这么一句代码:

    CSS

    img { max-width:100%; }

    1
    2
    3
    img {
    max-width:100%;
    }

    含义是:确保图片的最大宽度不会超过浏览器的窗口或其容器可视部分的宽度,所以当窗口或容器的可视部分变窄时,图片的最大宽度值也会相应的变小,图片本身永远不会覆盖容器。

    四:理解css单位px,em,rem的区别:

    1.  Px是css中最基本的长度单位,在PC端,设计稿多少像素,页面css就写多少像素。

    1.  em 是相对单位,相对于上下文元素而言,一般情况下,浏览器默认的字体大小是16px,也就是1em等于16px;比如:

    如果一个文字大小是48px,上下文元素是(浏览器),那么转换成em 就是 48/16 = 3em. 但是如果一个h1标签的font-size是48px, h1            标签内部span标签font-size 是 24px,那么h1标签的font-size = 48 / 16 = 3em  h1 span {font-size = 24/48 = 0.5em}.

    3. rem也是相对单位。rem是相对于html根元素来计算的,这就是说只要在根节点设定好参考值,那么全篇的1rem都相等,计算方式同           em,默认1rem=16px; 同理你可以 设定html { font-size:62.5% } 那么1rem就等于10px,以此类推。。。

    比如设置html根元素 如下代码:

    CSS

    html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}

    1
    html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}

    当一个p元素是24px的话,那么转换成rem为单位的话,那么只需要如下这样写即可:

    CSS

    P {font-size: 2.4rem; /*2.4 × 10px = 24px */ }

    1
    P  {font-size: 2.4rem; /*2.4 × 10px = 24px */ }

    五:元素未知宽度居中。

    我们先来介绍一下未知宽度,元素居中的方法,对于响应性web设计是有帮助的,我们可以来了解下。

    第一种方法:

    假如页面html结构如下:

    XHTML

    <div><p>What is CSS?</p></div>

    1
    <div><p>What is CSS?</p></div>

    只需要给父级元素div 设置 文本对齐是 居中对齐。子元素设定display:inline-block即可。如下代码:

    CSS

    div{text-align:center} p{display:inline-block}

    1
    2
    div{text-align:center}
    p{display:inline-block}

    第二种方法如下:

    CSS

    div{position:relative; left:50%; float:left;} p{position:relative; left:-50%;}

    1
    2
    div{position:relative; left:50%; float:left;}
    p{position:relative; left:-50%;}

    六:媒体查询标准写法:

    XHTML

    @media 设备类型 and (设备特性) { // css 样式 }

    1
    2
    3
    @media 设备类型 and (设备特性) {
    // css 样式
    }

    在css2.1中定义了10种设备类型,分别如下:

     可以指定的值  含义
     all  所有设备
     screen  电脑显示器
     print  打印用纸或打印预览视图
     handled  便携设备
     tv  电视机类型的设备
     speech  语音和音频合成器
     braille  盲人用点字法触觉回馈设备
     embossed  盲人打印机
     projection  各种投影设备
     tty  使用固定密度字母栅格的媒介,比如电传打字机和终端

    Css设备特性共有13种,是一个类似于CSS属性的集合。但与CSS属性不同的是,大部分设备特性的指定值接受min/max的前缀,用来表示大于等于或小于等于的逻辑,以此避免使用<和>这些字符。

    设备特性如下表:

     特性  可指定的值  是否允许使用min/max前缀  特性说明
     width  带单位的长度数值  允许  浏览器窗口的宽度
     height  带单位的长度数值  允许  浏览器窗口的高度
     device-width  带单位的长度数值  允许  设备屏幕分辨率的宽度值
     device-height  带单位的长度数值  允许  设备屏幕分辨率的高度值
     orientation  只能指定两个值:portrait或landscape  不允许  窗口的方向是纵向还是横向,
     aspect-ratio  比例值,例如:16/9  允许  窗口的纵横比,比例值为浏览器窗口的宽度值/高度值
     device-aspect-ratio  比例值,例如:16/9  允许  设备屏幕分辨率的纵横比,比例值为设备屏幕分辨率的宽度值/高度值
     color  整数值  允许  设备使用多少位的颜色值,如果不是彩色设备,该值为0
     color-index  整数值  允许  色彩表中的色彩数
     monochrome  整数值  允许  单色帧缓冲器中每像素的字节数
     resolution  分辨率值,譬如300dpi  允许  设备的分辨率
     scan  只能指定两个值:progressive或interlace  不允许  电视机类型设备的扫描方式,progressive表示逐行扫描,interlace表示隔行扫描
     grid  只能指定两个值:0或1  不允许  设备是基于栅格还是基于位图。基于栅格时该值为1,否则该值为0

    上面是一些响应式web设计的基本知识点,下面我们可以详细讲解下响应式web设计如何实践?

    1. 首先需要在页面头部引入这行meta代码,如下:

    XHTML

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=0" />

    1
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=0" />

    它的意思我这里不说了,如果不明白的话,可以看上面 提到的 无双那篇博客 很详细。

    还要引入这一句:

    XHTML

    <meta content="telephone=no,email=no" name="format-detection" />

    1
    <meta content="telephone=no,email=no" name="format-detection" />

    我们的代码有类似于电话这样的数字的时候,因为有的手机上它会自动转换成可以拨打电话,所以我们加上这句就不会了。

    比如我页面引入如下:

    新葡亰496net 3

    2. 响应性web设计需要使用css3媒体查询media来写不同的css样式。在移动端浏览器中或者某些桌面浏览器中,window对象有一个devicePixelRatio属性,它的官方定义为,设备的物理像素与设备的独立像素的比列,也就是 devicePixelRatio = 设备的物理像素/ 设备的独立像素。这三个参数不是固定的,只要其中2个确定了,那么就可以知道第三个参数了,设备的物理像素我们可以映射到设备的分辨率的宽度,独立像素我们可以映射到媒体查询media定义的宽度。而比列devicePixelRatio我们可以理解为css中的1像素(px)在设备上占用多少个物理像素。比如我们目前常见的手机分辨率如下:

     手机类型:  分辨率
     小米3  1080*1920
     小米2  720*1280
     红米Note  720*1280
     魅族4  1152*1920
     魅族3  1080*1800
     魅族2  800*1280
     iphone6  750*1334
    iphone5s  640*1136
    iphone4s  480*800
     iphone3s  320*480
     三星  720*1280
     三星  480*800

    如上小米3分辨率为1080,独立像素为360px,那么比列为3,也就是一个css的1px,占用3个物理像素,小米2和红米Note分辨率为720,独立像素还是360px,所以比列为2,所以小米3相对于小米2与红米Note更清晰。同理iphone和其他类型的手机也一样。

    而上面说的独立像素就是360px,正是我们css中的媒体查询关联的。

    如下我们可以在css加上这样的媒体查询就可以匹配到样式了;如下:

    /* 针对手机屏幕的宽度是360 384等屏幕的宽度

    *width(宽度可以设置为384px) max-width:384来计算 但是边距 字体大小等还是安装360px来计算

    *****************************************/

    CSS

    @media (min-width:360px) and (max-width: 399px) {}

    1
    @media (min-width:360px) and (max-width: 399px) {}

    而我们目前的独立像素有320,400的,我们也可以增加css媒体查询。如下:

    CSS

    /* min-width:320px * 针对设备独立像素为320px 的css *变量让你轻松制作响应式网页,响应式Web设计实战总结。 min-width:320 和 max-width:639之间 320-639公用样式也包含在里面 ============================*/ @media (min-width: 320px) and (max-width:639px){} /* * 针对设备独立像素为400px ========================*/ @media (min-width: 400px) and (max-width:401px){}

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    /* min-width:320px
     
    * 针对设备独立像素为320px 的css
     
    * min-width:320 和 max-width:639之间 320-639公用样式也包含在里面
     
    ============================*/
     
    @media (min-width: 320px) and (max-width:639px){}
     
    /*
     
    * 针对设备独立像素为400px
     
    ========================*/
     
    @media (min-width: 400px) and (max-width:401px){}

    但是也还有些目前还未知的独立像素,比如未来的某时刻有大于640px的独立像素,或者是说我们手机移到竖屏时候,我们也可以针对适应的做一点匹配。如下我们针对640px-999px做一个匹配。

    CSS

    /* min-width:640px * 针对设备独立像素为640px 的css * min-width:640 和 max-width:999之间 ============================*/ @media (min-width: 640px) and (max-width:999px){} 但是在PC端,我们为了适应PC端,所以针对宽度为1000以上也做一个显示处理。 /* 最小宽度1000样式 *为了适应PC端 所以PC端在设计时候 默认以1000px来设计的 =======================*/ @media screen and (min-width:1000px) {}

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    /* min-width:640px
     
    * 针对设备独立像素为640px 的css
     
    * min-width:640 和 max-width:999之间
     
    ============================*/
     
    @media (min-width: 640px) and (max-width:999px){}
     
    但是在PC端,我们为了适应PC端,所以针对宽度为1000以上也做一个显示处理。
     
    /* 最小宽度1000样式
     
    *为了适应PC端 所以PC端在设计时候 默认以1000px来设计的
     
    =======================*/
     
    @media screen and (min-width:1000px) {}

    我们都知道在IE6-8下 IE是不支持css3中的媒体查询的,所以在网上有大牛已经帮我们考虑到这个问题了,所以只需要在网上下载 respond.js下来放到我们本地,然后页面上引入即可。respond.js的github地址如下:

    通过以上:我们可以对编写css响应性web设计有一个规范,如下:(当然如果大家有更好的方法也可以提出来。)

    1. 头部reset.css 是否要独立出来一个css文件,或者不独立出来 直接放在css顶部。

    2. 公用的头部或者尾部样式 直接放在css文件顶部,及公用的页面css样式放在顶部(添加注释。)

    3. 媒体查询css样式分别如下组织:

    4. 移动端开发css媒体查询 代码组织如下:

    CSS

    /* min-width:320px * 针对独立像素为320px 的css =======================================================================================================*/ @media (min-width: 320px) and (max-width:639px){ /* css style*/ } /* 针对独立像素的宽度是360 384等 * max-width:384来计算 但是边距 字体大小等还是安装360px来计算 *****************************************/ @media (min-width:360px) and (max-width: 399px) { /* css style*/ } /* 针对独立像素为400px =======================================================================================================*/ @media (min-width: 400px){ /* css style*/ } /* 针对独立像素大于640以上的 小于999的 =======================================================================================================*/ @media (min-width: 640px) and (max-width:999){ /* css style*/ }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    /* min-width:320px
    * 针对独立像素为320px 的css
    =======================================================================================================*/
    @media (min-width: 320px) and (max-width:639px){
    /* css style*/
    }
     
    /* 针对独立像素的宽度是360 384等
    * max-width:384来计算 但是边距 字体大小等还是安装360px来计算
    *****************************************/
    @media (min-width:360px) and (max-width: 399px) {
    /* css style*/
    }
     
    /* 针对独立像素为400px
    =======================================================================================================*/
    @media (min-width: 400px){
    /* css style*/
    }
     
    /* 针对独立像素大于640以上的 小于999的
    =======================================================================================================*/
    @media (min-width: 640px) and (max-width:999){
    /* css style*/
    }
    1. 在PC端 1000以上的媒体查询写在如下里面:

    CSS

    @media screen and (min-width:1000px) { /* css style*/ }

    1
    2
    3
    @media screen and (min-width:1000px) {
    /* css style*/
    }
    1. 基本的编码规范注意事项如下:

    1.给html根元素字体大小定义相对单位(rem)如下:

    CSS

    html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}

    1
    html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}

    之后的元素字体使用rem作为单位。比如h2字体大小是24px,那么在移动端 字体大小设置为 font-size:2.4rem 在媒体查询
    @media (min-width:1000) {}内 字体大小希望可以写2个,font-size:24px;font-size:2.4rem,这是为了未来的移动设备独立像素
    超过1000后能使用rem作单位。

    2.根据设计稿给body元素设置默认的font-size及color,之后的媒体查询根据自身的条件需要覆盖font-size及color的话 就覆盖掉。

    3.在对应的设备媒体查询内,有很多公用的css样式希望合并,比如这样的:

    CSS

    .six-qa li .q{line-height:26px;font-size:1.6rem;} .six-qa li .a{line-height:26px;font-size:1.6rem;}

    1
    2
    .six-qa li .q{line-height:26px;font-size:1.6rem;}
    .six-qa li .a{line-height:26px;font-size:1.6rem;}

    可以直接合并成如下:

    CSS

    .six-qa li .q,.six-qa li .a{line-height:26px;font-size:1.6rem;}

    1
    .six-qa li .q,.six-qa li .a{line-height:26px;font-size:1.6rem;}

    编写响应性web设计css媒体查询更好的方案思考?

    我们都知道,为了自适应各种设备,我们需要编写不同的css进行适配,比如宽度,外边距,内边距,字体大小等不同,需要不同的适配,那么我们现在能不能编写一份css呢,比如我编写一份针对:独立像素为400屏幕宽度的 编写一份css样式,然后其他的样式,比如320的,384的,360的或者640以上的,针对这些css样式,我们能不能使用NodeJS来自动读取400的css,然后分别对上面独立像素大小的屏幕进行比例一下,比如屏幕400像素的 font-size:24px 那么 320px的屏幕字体大小就是 font-size = Math.floor(320*24/400),其他css属性都按照这种方式来做,那么在本地就可以生成不同的版本css了(比如针对320版本的,针对640以上css版本的),然后在head头部分别引入不同的css版本,比如如下引入:

    XHTML

    <link rel="stylesheet" href="320.css" media="all and (min-width:320px) and (max-width:321px)"/> <link rel="stylesheet" href="360.css" media="all and (min-width:360px) and (max-width:399px)"/> <link rel="stylesheet" href="400.css" media="all and (min-width:400px) and (max-width:401px)"/> <link rel="stylesheet" href="640.css" media="all and (min-width:640px) and (max-width:999px)"/> <link rel="stylesheet" href="1000.css" media="all and (min-width:1000px)"/>

    1
    2
    3
    4
    5
    <link rel="stylesheet" href="320.css" media="all and (min-width:320px) and (max-width:321px)"/>
    <link rel="stylesheet" href="360.css" media="all and (min-width:360px) and (max-width:399px)"/>
    <link rel="stylesheet" href="400.css" media="all and (min-width:400px) and (max-width:401px)"/>
    <link rel="stylesheet" href="640.css" media="all and (min-width:640px) and (max-width:999px)"/>
    <link rel="stylesheet" href="1000.css" media="all and (min-width:1000px)"/>

    我们知道,只要设备的宽度在以上任何一种的时候 只会渲染一份css,其他的css不渲染,所以我们可以按照这种方式来做一份css。至于这种方案我以后会使用nodeJS来做出来的。最后我提供一个可运行的demo吧,你们可以下载下面的demo,放在本地服务器下运行下,在手机端看下,就可以针对不同的设备大小来做适配的,不过我这个demo没有做的很全面,目前只适配了320的 360-399的 400的 1000以上的,暂时没有适配640的,所以如果测试的时候,手机横屏的时候部分会没有css样式的,这也很正常的,因为我只是做demo的,没有做的那么全的匹配,只是想说 响应性web设计匹配就是这么一个意思 一个demo。现在废话不多说了,有兴趣的话,可以看如下demo。

    demo下载

    1 赞 8 收藏 评论

    新葡亰496net 4

    在 CSS 中使用 LESS 实现更多功能

    2013/08/18 · CSS · CSS

    原文出处: IBM developerworks   

    CSS 彻底改变了 Web 页面的设计,但 CSS 仍然是静态的,而且在其句法发展方面受到限制。这些限制是有目的且合乎情理的,鼓励广泛加以实现。但开发人员和设计人员常常发现 CSS 使用起来很单调乏味。许多 Web 框架包含一些工具,这些工具使得人们更容易使用更灵活的特性创作 CSS,然后将结果编译成静态 CSS,以便部署到站点。最近的一些项目更侧重于创建旨在编译到 CSS 中的语言。Alexis Sellier 的开源项目 LESS 是这类语言中最受欢迎的一种语言。

    LESS 在现有 CSS 语法之上添加了一些开发人员熟悉的特性,比如变量、mixins、运算符和函数。可以使浏览器中的 JavaScript 或通过服务器端 JavaScript 工具集的预处理将 LESS 编译到 CSS 中。LESS 在其他各种工具集中也得到了广泛应用,包括 JavaScript 的流行 Bootstrap 项目。在本文中,我要介绍的是 LESS(尤其是 1.4 版本),LESS 是为现代网站编写可读性的、可维护的 CSS 的一种方式。参见 下载部分,获取本文的示例代码。

    初始配置

    让我们来把下面这个页面变成响应式的吧:新葡亰496net 5

    这个页面在PC端看上去很不错,不过你可以看到它在移动端的表现并不好。就像下面这样:
    新葡亰496net 6

    在下面这张图中,我们在样式上做了一些改进,让它看起来更好一点:

    1. 重新排列整个网格布局,使用垂直排列取代固定两列布局。
    2. 将框架整体上移了一点。
    3. 对字体进行了缩放 。

    新葡亰496net 7

    目光转到CSS代码中,下面是我们要修改的代码:

    h1 { font-size: 30px; } #navbar { margin: 30px 0; } #navbar a { font-size: 30px; } .grid { margin: 30px 0; grid-template-columns: 200px 200px; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    h1 {
      font-size: 30px;
    }
    #navbar {
      margin: 30px 0;
    }
    #navbar a {
      font-size: 30px;
    }
    .grid {
      margin: 30px 0;
      grid-template-columns: 200px 200px;
    }

    更具体地说,我们需要在一个媒体查询中做出以下调整:

    • 将h1的字体调整为20px;
    • 减少#navbar的上外边距为15px;
    • 将#navbar的字体大小减少到20px;
    • 减少.grid的外边距为15px;
    • 将.grid从两列布局变为单列布局。

    注意:样式表里不仅仅是这些CSS声明,但是在这篇教程中我跳过它们,因为媒体查询并不影响它们的设置。你可以在这里获取完整的代码。

    仅供参考

    基本布局测试

    要了解这两个体系构建布局的方式,我们将通过相同的 HTML 页面,利用不同的布局方式 (即 Flexbox 与 CSS Grid)为大家区分。

    同时,你也可以通过文章顶部附近的下载按钮,下载演示项目进行对比,或者通过在线演示来察看它们:

    新葡亰496net 8

    简版静态页面布局

    该页面的设计相对比较简单 – 它是由一个居中的容器组成,在其内部则包含了标头、主要内容部分、侧边栏和页脚。接下来,我们要完成同时保持 CSS 和 HTML 尽可能整洁的挑战事项:

    1. 在布局中将四个主要的部分进行定位。
    2. 将页面变为响应式页面;
    3. 对齐标头:导航朝左对齐,按钮向右对齐。

    如你所见,为了便于比较,我们将所有事项从简处理。那么,让我们从第一个挑战事项开始吧!

    入门

    下载最新版 LESS(撰写本文之时是 1.4;参见 参考资料)。然后准备学习其语言。万维网联盟 (W3C) 在其维基中提供了一些用于学习 CSS 的资料。我基本上遵循该教程的顺序,因此,如有需要的话,您可以一前一后学习基本的 CSS 和 LESS。

    清单 1 再现了 W3C 教程的第一个示例:

    清单 1. 基本 CSS 示例 (listing1.css)

    CSS

    p { color: red; font-size: 12px; background-color: green; }

    1
    2
    3
    4
    5
    p {
      color: red;
      font-size: 12px;
      background-color: green;
    }

    清单 2 中的 HTML 将 清单 1 中的 CSS 投入使用:

    新葡亰496net,清单 2. 引用清单 1 的基本 CSS 示例的 HTML (listing2.html)

    CSS

    <head> <link rel="stylesheet" type="text/css" href="listing1.css"> </head> <body> <p>This is a paragraph</p> </body>

    1
    2
    3
    4
    5
    6
    <head>
        <link rel="stylesheet" type="text/css" href="listing1.css">
    </head>
    <body>
        <p>This is a paragraph</p>
    </body>

    图 1 显示了 Mac OS X 上 Safari 浏览器中显示的 listing2.html:

    图 1. 使用清单 1 中的 CSS 的浏览器输出

    新葡亰496net 9

    旧方法

    不使用CSS变量确实可以做到同样的效果,但这样会增加许多不必要的代码,因为上面大部分修改都需要将声明在媒体查询中重写一遍。就像下面这样:

    @media all and (max-width: 450px) { navbar { margin: 15px 0; } navbar a { font-size: 20px; } h1 { font-size: 20px; } .grid { margin: 15px 0; grid-template-columns: 200px; } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    @media all and (max-width: 450px) {
      
      navbar {
        margin: 15px 0;
      }
      
      navbar a {
        font-size: 20px;
      }
     
      h1 {
        font-size: 20px;
      }
      
      .grid {
        margin: 15px 0;
        grid-template-columns: 200px;
      }
    }

    前言

    完成《CSS核心技术与实战》这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章没有写进去,但不管怎么说,多少了解一下还是有好处的,里面部分功能,有些浏览器已经实现了。

    如果你对CSS预处理器感兴趣,那么本篇文章也许很适合你。

    初学CSS预处理器,其实我是不太明白为什么需要用这种东西的,后来想明白一件事,一切都是为了可维护性。比如下面这幅图

    新葡亰496net 10

    距离左边有一点点间距,而其他元素设置的间距往往也是一样的,但如果不使用预处理器,或许我们会这样写

    CSS

    .box{ padding:12px; } .footer{ padding:12px; } ....{ padding:12px; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .box{
    padding:12px;
    }
    .footer{
    padding:12px;
    }
    ....{
    padding:12px;
    }

    但这种问题是,如果需要更改所有间距,你不得不诶个去替换,这样带来了很多不必要的工作量,如果使用预处理器就好办了,因为预处理器是允许你使用变量的,你可以像编程语言那样,定义一个全局变量,在需要的地方,引用这个全局变量,更改的时候,只需要修改一处就好了,假设代码如下:

    CSS

    var pad = 12px; .box{ padding:pad; } .footer{ padding:pad; }

    1
    2
    3
    4
    5
    6
    7
    var pad = 12px;
    .box{
    padding:pad;
    }
    .footer{
    padding:pad;
    }

    也就是说预处理器很大一部分就是为了解决可维护性,本章讲解的是后处理器。

    挑战 1:定位页面部分

    Flexbox 解决方案

    我们将从 Flexbox 解决方案开始。我们将为容器添加display: flex来指定为 Flex 布局,并指定子元素的垂直方向。

    .container { display: flex; flex-direction: column; }

    1
    2
    3
    4
    .container {
        display: flex;
        flex-direction: column;
    }

    现在我们需要使主要内容部分和侧边栏彼此相邻。由于 Flex 容器通常是单向的,所以我们需要添加一个包装器元素。

    XHTML

    <header></header> <div class="main-and-sidebar-wrapper"> <section class="main"></section> <aside class="sidebar"></aside> </div> <footer></footer>

    1
    2
    3
    4
    5
    6
    <header></header>
    <div class="main-and-sidebar-wrapper">
        <section class="main"></section>
        <aside class="sidebar"></aside>
    </div>
    <footer></footer>

    然后,我们给包装器在反向添加display: flexflex-direction属性。

    .main-and-sidebar-wrapper { display: flex; flex-direction: row; }

    1
    2
    3
    4
    .main-and-sidebar-wrapper {
        display: flex;
        flex-direction: row;
    }

    最后一步,我们将设置主要内容部分与侧边栏的大小。通过 Flex 实现后,主要内容部分会比侧边栏大三倍。

    .main { flex: 3; margin-right: 60px; } .sidebar { flex: 1; }

    1
    2
    3
    4
    5
    6
    7
    .main {
        flex: 3;
        margin-right: 60px;
    }
    .sidebar {
       flex: 1;
    }

    如你所见,Flex 将其很好的实现了出来,但是仍需要相当多的 CSS 属性,并借助了额外的 HTML 元素。那么,让我们看看 CSS Grid 如何实现的。

    CSS Grid 解决方案

    针对本项目,有几种不同的 CSS Grid 解决方法,但是我们将使用网格模板区域语法来实现,因为它似乎最适合我们要完成的工作。

    首先,我们将定义四个网格区域,所有的页面各一个:

    XHTML

    <header></header> <!-- Notice there isn't a wrapper this time --> <section class="main"></section> <aside class="sidebar"></aside> <footer></footer>

    1
    2
    3
    4
    5
    <header></header>
    <!-- Notice there isn't a wrapper this time -->
    <section class="main"></section>
    <aside class="sidebar"></aside>
    <footer></footer>

    header { grid-area: header; } .main { grid-area: main; } .sidebar { grid-area: sidebar; } footer { grid-area: footer; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    header {
        grid-area: header;
    }
    .main {
        grid-area: main;
    }
    .sidebar {
        grid-area: sidebar;
    }
    footer {
        grid-area: footer;
    }

    然后,我们会设置网格并分配每个区域的位置。初次接触 Grid 布局的朋友,可能感觉以下的代码会有些复杂,但当你了解了网格体系,就很容易掌握了。

    .container { display: grid; /* Define the size and number of columns in our grid. The fr unit works similar to flex: fr columns will share the free space in the row in proportion to their value. We will have 2 columns - the first will be 3x the size of the second. */ grid-template-columns: 3fr 1fr; /* Assign the grid areas we did earlier to specific places on the grid. First row is all header. Second row is shared between main and sidebar. Last row is all footer. */ grid-template-areas: "header header" "main sidebar" "footer footer"; /* The gutters between each grid cell will be 60 pixels. */ grid-gap: 60px; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    .container {
        display: grid;
     
        /*     Define the size and number of columns in our grid.
        The fr unit works similar to flex:
        fr columns will share the free space in the row in proportion to their value.
        We will have 2 columns - the first will be 3x the size of the second.  */
        grid-template-columns: 3fr 1fr;
     
        /*     Assign the grid areas we did earlier to specific places on the grid.
            First row is all header.
            Second row is shared between main and sidebar.
            Last row is all footer.  */
        grid-template-areas:
            "header header"
            "main sidebar"
            "footer footer";
     
        /*  The gutters between each grid cell will be 60 pixels. */
        grid-gap: 60px;
    }

    就是这样! 我们现在将遵循上述结构进行布局,甚至不需要我们处理任何的 margins 或 paddings 。

    删除魔法值

    看到 清单 1 的开发人员很可能立刻注意到那些违反开发者本能的内容,即硬编码到 CSS 中的值,这些值有时被揶揄为 “魔法值 (magic value)”。LESS 中最重要的特性之一是变量。清单 3 是使用变量的一个 LESS 基本示例版本:

    清单 3. 使用 LESS 中的变量的基本 CSS 示例 (listing3.css)

    CSS

    @main-text-color: red; @main-text-size: 12px; @main-text-bg: green; p { color: @main-text-color; font-size: @main-text-size; background-color: @main-text-bg; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @main-text-color: red;
    @main-text-size: 12px;
    @main-text-bg: green;
     
    p {
      color: @main-text-color;
      font-size: @main-text-size;
      background-color: @main-text-bg;
    }

    清单 3 不是语法正确的 CSS,因此您不能在 HTML 中将 listing1.css替换为 listing3.less。您还必须更新主机 HTML 来调用 JavaScript 编译器,如清单 4 所示:

    清单 4. 引用基本 CSS 示例 LESS 版本的 HTML (listing4.html)

    CSS

    <head> <link rel="stylesheet/less" type="text/css" href="listing3.less"> </head> <body> <p>This is a paragraph</p> <script src="less.js" type="text/javascript"></script> </body>

    1
    2
    3
    4
    5
    6
    7
    <head>
        <link rel="stylesheet/less" type="text/css" href="listing3.less">
    </head>
    <body>
        <p>This is a paragraph</p>
        <script src="less.js" type="text/javascript"></script>
    </body>

    请注意,在 清单 4 中,我将 script标记放在页面 body的结尾处。传统上,大多数开发人员将 script标记放在 head中。但将它们放在 body中是合法的,这利用了这样一个事实(引用自 HTML 4 规范),即 “script元素按照加载文档的顺序进行求值”。如今许多站点在临近结束时都有一些脚本,因此主要内容的加载不会因为任何脚本处理而延迟。

    新的方法

    现在让我们看看使用CSS变量是如何起作用的。首先,我们要声明需要更改或复用的变量:

    :root { --base-font-size: 30px; --columns: 200px 200px; --base-margin: 30px; }

    1
    2
    3
    4
    5
    :root {
      --base-font-size: 30px;
      --columns: 200px 200px;
      --base-margin: 30px;
    }

    然后,我们只需要在app中使用它们就可以了。非常简单:

    #navbar { margin: var(--base-margin) 0; } #navbar a { font-size: var(--base-font-size); } h1 { font-size: var(--base-font-size); } .grid { margin: var(--base-margin) 0; grid-template-columns: var(--columns); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    #navbar {
      margin: var(--base-margin) 0;
    }
    #navbar a {
      font-size: var(--base-font-size);
    }
    h1 {
      font-size: var(--base-font-size);
    }
    .grid {
      margin: var(--base-margin) 0;
      grid-template-columns: var(--columns);
    }

    之后,我们可以在媒体查询中修改这些变量值:

    @media all and (max-width: 450px) { :root { --columns: 200px; --base-margin: 15px; --base-font-size: 20px; }

    1
    2
    3
    4
    5
    6
    @media all and (max-width: 450px) {
      :root {
        --columns: 200px;
        --base-margin: 15px;
        --base-font-size: 20px;
    }

    这样的代码是不是比之前要简洁多了?我们只需要专注于:root选择器就可以了。

    我们将媒体查询中的4个声明减少到了1个,代码也从13行减少到了4行。

    当然,这只是一个简单的例子。想象一下,在一个大中型网站中,有一个--base-margin变量控制着所有的外边距。当你想要在媒体查询时修改属性,并不需要用复杂的声明填充整个媒体查询,只是简简单单地修改这个变量值就可以了。

    总之,CSS变量可以定义为未来的响应式。如果你想要学习更多的知识,我推荐你看我的免费教程。用不了多久你就能成为一个CSS变量大师。

    查看更多我翻译的Medium文章请访问:
    项目地址:https://github.com/WhiteYin/translation

    1 赞 2 收藏 评论

    新葡亰496net 11

    那么后处理器和预处理器有什么区别

    你可以这样理解,后处理器就好比动态语言,而预处理器就好比静态语言。预处理器就是事先将结果编译出来,而后处理器则不同,值是在运行时才决定的。

    挑战 2:将页面变为响应式页面

    Flexbox 解决方案

    这一步的执行与上一步密切相关。对于 Flexbox 解决方案,我们将更改包装器的flex-direction属性,并调整一些 margins。

    @media (max-width: 600px) { .main-and-sidebar-wrapper { flex-direction: column; } .main { margin-right: 0; margin-bottom: 60px; } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @media (max-width: 600px) {
        .main-and-sidebar-wrapper {
            flex-direction: column;
        }
     
        .main {
            margin-right: 0;
            margin-bottom: 60px;
        }
    }

    由于网页比较简单,所以我们在媒体查询上不需要太多的重写。但是,如果遇见更为复杂的布局,那么将会重新的定义相当多的内容。

    CSS Grid 解决方案

    由于我们已经定义了网格区域,所以我们只需要在媒体查询中重新排序它们。 我们可以使用相同的列设置。

    @media (max-width: 600px) { .container { /* Realign the grid areas for a mobile layout. */ grid-template-areas: "header header" "main main" "sidebar sidebar" "footer footer"; } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @media (max-width: 600px) {
        .container {
        /*  Realign the grid areas for a mobile layout. */
            grid-template-areas:
                "header header"
                "main main"
                "sidebar sidebar"
                "footer footer";
        }
    }

    或者,我们可以从头开始重新定义整个布局。

    @media (max-width: 600px) { .container { /* Redefine the grid into a single column layout. */ grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar" "footer"; } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    @media (max-width: 600px) {
        .container {
            /*  Redefine the grid into a single column layout. */
            grid-template-columns: 1fr;
            grid-template-areas:
                "header"
                "main"
                "sidebar"
                "footer";
        }
    }

    服务器端编译

    到目前为止,我已经向您展示:开发和部署 LESS 便于快速使用浏览器,但却是有代价的。每次页面加载时,编译用的 JavaScript 都运行于用户的浏览器之上,这耗尽了计算资源并减缓了页面加载。如果在浏览器中加载 清单 4 ,并检查 JavaScript 控制台,则会看到一条消息:“less: css generated in 36ms”。36 毫秒的时间并不算长,但它代表着额外的不必要计算和时间。快速页面加载在 Web 上很重要。

    在转入生产模式之后,使用一个服务器端 JavaScript 工具将 LESS 编译到 CSS 中。Node.js 是一个流行选项,被记录在 LESS 站点上。我喜欢使用 Mozilla 的独立 JavaScript 项目 Rhino。要使用 Rhino 和 LESS,请下载并安装 Rhino(参见 参考资料)。将 js.jar 放在一个方便进行构建的位置。您需要一个特殊版本的 less.js,该版本可在 GitHub 完整下载的 LESS 中下载中找到(参见 参考资料)。本文中使用的版本是 less.js-master/dist/less-rhino-1.4.0.js。将 less-rhino-1.4.0.js 放在保存 Rhino JAR 的地方。下面准备将 LESS 代码编译到 CSS 中。

    要编译 listing3.less,请切换到 listing3.less 所在的目录并执行以下命令:

    CSS

    java -jar js.jar less-rhino-1.4.0.js listing3.less > listing3.css

    1
    java -jar js.jar less-rhino-1.4.0.js listing3.less > listing3.css

    编译操作会将生成的 CSS 放在 listing3.css 文件中。该文件的内容如下:

    CSS

    p { color: #ff0000; font-size: 12px; background-color: #008000; }

    1
    2
    3
    4
    5
    p {
      color: #ff0000;
      font-size: 12px;
      background-color: #008000;
    }

    在 listing3.css 中,LESS 变量被替换,颜色名称被替换为 RGB 形式(比如 red被替换为 #ff0000)。现在您可以按照常用方法将 listing3.css 部署到一台服务器中。

    CSS的未来

    在未来的CSS中将会支持更多的属性以及函数,其中不乏有变量,嵌套,值计算等,这一章我们将会讲解它们。

    注意:因为本节内容大部分需要CSS未来版本才支持,所以你的浏览器可能不一定有效果,不过有一个插件(cssnext)可以解决这个问题,关于这个插件的使用请到本节的最后一节中查看。

    挑战 3:对齐标头组件

    Flexbox 解决方案

    我们的标头包含了导航和一个按钮的相关链接。我们希望导航朝左对齐,按钮向右对齐。而导航中的链接务必正确对齐,且彼此相邻。

    XHTML

    <header> <nav> <li><a href="#"><h1>Logo</h1></a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </nav> <button>Button</button> </header>

    1
    2
    3
    4
    5
    6
    7
    8
    <header>
        <nav>
            <li><a href="#"><h1>Logo</h1></a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </nav>
        <button>Button</button>
    </header>

    我们曾在一篇较早的文章中使用 Flexbox 做了类似的布局:响应式标头最简单的制作方法。这个技术很简单:

    header { display: flex; justify-content: space-between; }

    1
    2
    3
    4
    header {
        display: flex;
        justify-content: space-between;
    }

    现在导航列表和按钮已正确对齐。下来我们将使``

    `内的 items 进行水平移动。这里最简单的方法就是使用display:inline-block`属性,但目前我们需要使用一个 Flexbox 解决方案:

    header nav { display: flex; align-items: baseline; }

    1
    2
    3
    4
    header nav {
        display: flex;
        align-items: baseline;
    }

    仅两行代码就搞定了! 还不错吧。接下来让我们看看如何使用 CSS Grid 解决它。

    CSS Grid 解决方案

    为了拆分导航和按钮,我们要为标头定义display: grid属性,并设置一个 2 列的网格。同时,我们还需要两行额外的 CSS 代码,将它们定位在相应的边界上。

    header{ display: grid; grid-template-columns: 1fr 1fr; } header nav { justify-self: start; } header button { justify-self: end; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    header{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    header nav {
        justify-self: start;
    }
    header button {
        justify-self: end;
    }

    至于导航中的内链 – 这是我们使用 CSS grid 最好的布局展示:

    新葡亰496net 12

    虽然链接为内链形式,但它们不能正确的对齐。由于 CSS grid 不具备基线选项(不像 Flexbox 具备的align-items属性),所以我们只能再定义一个子网格。

    header nav { display: grid; grid-template-columns: auto 1fr 1fr; align-items: end; }

    1
    2
    3
    4
    5
    header nav {
        display: grid;
        grid-template-columns: auto 1fr 1fr;
        align-items: end;
    }

    CSS grid 在此步骤中,存在一些明显的布局上的缺陷。但你也不必过于惊讶。因为它的目标是对齐容器,而不是内部的内容。所以,用它来处理收尾工作,或许不是很好的选择哦。

    LESS 替代注释语法

    LESS 的一个小小的增强是,编写单行注释的方式变得简单了。清单 5 显示了来自 W3C CSS 教程的一个标准注释示例:

    清单 5. 使用注释的 CSS 示例 (listing 5.css)

    JavaScript

    p { color: red; /* This is a comment */ font-size: 12px; }

    1
    2
    3
    4
    5
    p {
      color: red;
      /* This is a comment */
      font-size: 12px;
    }

    清单 6 中的 LESS 代码等同于 清单 5 :

    清单 6. 与使用简化注释的清单 5 等同的 LESS 代码 (listing6.less)

    CSS

    p { color: red; // This is a comment font-size: 12px; }

    1
    2
    3
    4
    5
    p {
      color: red;
      // This is a comment
      font-size: 12px;
    }

    清单 6 使用的语法对于程序员来说很常见,而且键入起来稍微容易一些。但鉴于处理 LESS 的方式,这种注释并不出现在生成的 CSS 中。如果您想为浏览器查看器保留注释(例如用于版权声明),则必须使用标准的 CSS 注释语法。

    W3C 教程其余内容专注于 CSS 选择器语法和常见属性的细节。此时,我要将重心转向 LESS 的更广泛使用,这是大多数 Web 开发人员在实践过程中越来越多遇见的情形。

    CSS变量

    结论

    如果你已经浏览完整篇文章,那么结论不会让你感到意外。事实上,并不存在最好的布局方式。Flexbox 和 CSS grid 是两种不同的布局形式,我们应该根据具体的场景将它们搭配使用,而不是相互替代。

    对于那些跳过文章只想看结论的朋友(不用担心,我们也这样做),这里是通过实例比较后的总结:

    1. CSS grids 适用于布局大画面。它们使页面的布局变得非常容易,甚至可以处理一些不规则和非对称的设计。
    2. Flexbox 非常适合对齐元素内的内容。你可以使用 Flex 来定位设计上一些较小的细节。
    3. 2D 布局适合使用 CSS grids(行与列)。
    4. Flexbox 适用于单一维度的布局(行或列)。
    5. 共同学习并使用它们。

    感谢你的阅读。若你有所收获,欢迎点赞与分享。

    1 赞 3 收藏 评论

    新葡亰496net 13

    创建响应式设计

    在 2010 年,许多 Web 设计人员开始倡导一种称为 响应式设计 的页面设计方法。从一开始,就需要构建灵活的 Web 页面,在从小型手机到比常用台式机更大的显示设备中查看它们。

    响应式设计的核心是 CSS3 媒体查询,该查询是一种根据用户显示器的性质(特别是尺寸)来调用 CSS 规则的标准方式。LESS 使我们能够更容易地展现使用媒体查询来实现响应式设计的 CSS。出于演示之目的,我将 developerWorks 博主 Bob Leah 的优秀响应式设计 示例 的一个 LESS 版本组合起来。在文章的代码包(参见 下载)中,它是 responsive.less。

    1. 变量的基本使用

    在这些新增的功能中最喜欢的非CSS变量莫属,CSS变量名通过自定义属性来设置(要实现全局变量,需要在htmlbody也可以在:root伪类中声明),并且自定义属性必须以--开头,使用var()来访问。如下:

    CSS

    :root{ --colorRed:red; --size:16px; --h:35px; --l-h:35px; } a{ display:block; height:var(--h); line-height:var(--l-h); color:var(--colorRed); font-size:var(--size); outline:1px solid #666; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    :root{
      --colorRed:red;
      --size:16px;
      --h:35px;
      --l-h:35px;
    }
     
    a{
      display:block;
      height:var(--h);
      line-height:var(--l-h);
      color:var(--colorRed);
      font-size:var(--size);
      outline:1px solid #666;
    }

    效果如图13.11

    新葡亰496net 14

    图13.11 变量

    以上我们通过:root在全局中定义了几个变量,然后在a元素中通过var函数来使用这些变量。

    需要注意的是这些变量对大小写是敏感的,如:--color--Color是两个不同的变量。

    另外这些变量也是可以继承的,如下这段:

    CSS

    :root{ --color-red:red; } .box{ color:var(--color-red); }

    1
    2
    3
    4
    5
    6
    :root{
      --color-red:red;
    }
    .box{
      color:var(--color-red);
    }

    CSS变量

    效果如图13.12

    新葡亰496net 15

    图13.12 继承

    这些变量也具有层叠性,如下这段代码:

    :root{ --head-color:red; } .box{ --head-color:blue; } .box p{ color:var(--head-color); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    :root{
      --head-color:red;
    }
    .box{
      --head-color:blue;
    }
    .box p{
      color:var(--head-color);
    }

    如上这段,我们在全局声明了一个--head-color.box中又声明了一次,那么它最终会使用的是它父元素中定义的--head-color,就近原则,效果如图13.13

    新葡亰496net 16

    图13.13 变量也具有层叠性

    不过还得注意一下就是这些变量不支持!important,也就是说设置了和没设置是一样的,根本没用,如下:

    CSS

    :root{ --head-color:red !important; } .box{ color:var(--head-color); } .box{ color:blue; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    :root{
      --head-color:red !important;
    }
    .box{
      color:var(--head-color);
    }
    .box{
      color:blue;
    }

    CSS变量

    效果如图13.14

    新葡亰496net 17

    图13.14 变量不支持!important

    看到了吧,虽然我们给--head-color设置了!important但还是被层叠了,如果是正常情况应该会像下面这段代码一样:

    CSS

    .box{ color:red !important; } .box{ color:blue; }

    1
    2
    3
    4
    5
    6
    .box{
      color:red !important;
    }
    .box{
      color:blue;
    }

    效果如图13.15

    新葡亰496net 18

    图13.15 如果可以的话应该是这个样子

    这个var函数还支持一个很强大的功能,允许你传递一个默认的参数,当变量不存在的时候就会使用默认值,如下:

    CSS

    :root{ /*--head-color:red;*/ } .box{ color:var(--head-color,orange); }

    1
    2
    3
    4
    5
    6
    :root{
      /*--head-color:red;*/
    }
    .box{
      color:var(--head-color,orange);
    }

    以上我们在var中使用了一个默认的值,当--head-color不存在就会使用orange,效果如图13.16

    新葡亰496net 19

    图13.16 使用默认值

    运算符

    responsive.less 中的一项关键技术是使用变量设置基本的方框大小,然后根据可视区的大小调整方框。我使用 LESS 运算符来进行缩放。例如,清单 7 中的代码段使用乘法运算符来缩放横幅图像:

    清单 7. LESS 中乘法的使用

    CSS

    #banner img { max-width: (@bannerwidth * @scale); max-height: (@mainheight * @scale); }

    1
    2
    3
    4
    #banner img {
      max-width: (@bannerwidth * @scale);
      max-height: (@mainheight * @scale);
    }

    在 清单 7 中,@bannerwidth和 @mainheight是根据 @scale因子缩减的默认值。最新的 LESS 版本要求您将包含运算符的所有表达式放在圆括号中,以避免语法混淆。

    2.CSS变量的意义

    如果你使用过一些编程语言,你不会忘记变量是多么的重要,如在Javascript中,我们经常会写这样一段代码:

    JavaScript

    var oBox = document.getElementById('box'); oBox.style.width = '100px'; oBox.style.height = '100px'; oBox.style.backgroundColor = 'red';

    1
    2
    3
    4
    var oBox = document.getElementById('box');
    oBox.style.width = '100px';
    oBox.style.height = '100px';
    oBox.style.backgroundColor = 'red';

    在这段代码中我们通过oBox变量来引用.box元素,在下次的使用中就不需要重新去获取这个元素了,这样给我们带来了很大的便利。在CSS中变量也同样重要,不然你让LessSass等预处理情何以堪,正是因为它们支持在CSS中像编程语言一样编程,所以在之前的很长一段时间里它们是那样的让人着迷。在CSS中合理的使用变量,可以减轻不少的工作,以及可维护性。比如一个网站的主调色,它们基本都是固定的,那么我们完全可以使用变量来储存它们,另外一点就是当网站改版时,如果网站主调色改变时我们只需要改变相应的变量即可,这或许就是变量的最大好处吧。从另一个角度来讲使用变量的另一个好处就是,具有一致性,比如页面中所有元素的字体大小都是引用的同一个变量,那么当我们改变这个变量时,其他元素的字体大小都会相应的改变,我们来看一下,下面这段代码:

    CSS

    :root{ --main-size:12px; } .box{ font-size:var(--main-size); } .box2{ font-size:var(--main-size); } .box3{ font-size:var(--main-size); } @media screen and (min-width:600px){ :root{ --main-size:16px; } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    :root{
      --main-size:12px;
    }
    .box{
      font-size:var(--main-size);
    }
    .box2{
      font-size:var(--main-size);
    }
    .box3{
      font-size:var(--main-size);
    }
     
    @media screen and (min-width:600px){
      :root{
        --main-size:16px;
      }
    }

    以上当屏幕宽度大于600px时,这三个元素都会相应的改变字体大小,使用这个可以和rem媲美。也许你还想给其中一个元素单独指定一个比--main-size大一点的字体,那我们可以结合使用calc函数,如下:

    CSS

    :root{ --main-size:12px; } .box{ font-size:var(--main-size); } .box2{ font-size:calc(var(--main-size) 2px); } .box3{ font-size:var(--main-size); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    :root{
      --main-size:12px;
    }
    .box{
      font-size:var(--main-size);
    }
    .box2{
      font-size:calc(var(--main-size) 2px);
    }
    .box3{
      font-size:var(--main-size);
    }

    效果如图13.17

    新葡亰496net 20

    图13.17 单独设置某个样式

    calc允许你使用计算功能,不过需要注意的是中间需要一个空格。

    虽然以上只是几个很简单的例子,但这些也足以说明CSS变量是多么的重要,在以后的CSS写作中不要忘了使用它。

    嵌套规则

    LESS 最有用的功能之一是嵌套 CSS 规则。嵌套规则有助于您以简单易懂的方式组织代码。在清单 8(responsive.less 中的一段经过修改的摘录片段)中,我在媒体查询内嵌套了通用的 CSS 规则:

    清单 8. LESS 中嵌套规则的使用

    CSS

    @media (min-width: 401px) and (max-width: 800px) { @scale: 0.75 #banner { width: (@bannerwidth * @scale); } #banner img { max-width: (@bannerwidth * @scale); max-height: (@mainheight * @scale); } #main { width: (@mainwidth * @scale - @extrabuffer); } #main-content { width: (@maincontentwidth * @scale * 0.75 - @extrabuffer); float: left; } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    @media (min-width: 401px) and (max-width: 800px) {
      @scale: 0.75
      #banner { width: (@bannerwidth * @scale); }
      #banner img {
        max-width: (@bannerwidth * @scale);
        max-height: (@mainheight * @scale);
      }
      #main { width: (@mainwidth * @scale - @extrabuffer); }
      #main-content {
        width: (@maincontentwidth * @scale * 0.75 - @extrabuffer);
        float: left;
      }
    }

    清单 8 中的嵌套规则等同于清单 9 中多个独立的 CSS 规则:

    清单 9. 等同于清单 8,但无嵌套规则

    JavaScript

    @scale: 0.75 @media (min-width: 401px) and (max-width: 800px) and #banner { width: (@bannerwidth * @scale); } @media (min-width: 401px) and (max-width: 800px) and #banner img { { max-width: (@bannerwidth * @scale); max-height: (@mainheight * @scale); } @media (min-width: 401px) and (max-width: 800px) and #main { width: (@mainwidth * @scale

    • @extrabuffer); } @media (min-width: 401px) and (max-width: 800px) and #main-content { width: (@maincontentwidth * @scale * 0.75 - @extrabuffer); float: left; }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    @scale: 0.75
     
    @media (min-width: 401px) and (max-width: 800px) and #banner {
       width: (@bannerwidth * @scale);
    }
     
    @media (min-width: 401px) and (max-width: 800px) and #banner img {
    {
      max-width: (@bannerwidth * @scale);
      max-height: (@mainheight * @scale);
    }
     
    @media (min-width: 401px) and (max-width: 800px) and #main {
       width: (@mainwidth * @scale - @extrabuffer);
    }
     
    @media (min-width: 401px) and (max-width: 800px) and #main-content {
        width: (@maincontentwidth * @scale * 0.75 - @extrabuffer);
        float: left;
    }

    清单 9 中的版本没有提供这些密切相关规则的自然分组,而且还因为反复指定媒体查询而违反了 DRY(不要重复自己)原则。

    应用规则集(@apply)

    我想你如果体验过组件化,那么你对@apply肯定会爱不释手,简单来说@apply可以实现更小的组合。如下:

    CSS

    :root{ --overflow-ellipsis:{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }; } .title{ width:200px; @apply --overflow-ellipsis; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    :root{
      --overflow-ellipsis:{
        overflow:hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      };
    }
    .title{
      width:200px;
      @apply --overflow-ellipsis;
    }

    在以上我们定义了一个用来实现当元素溢出时隐藏文字的代码段--overflow-ellipsis,当我们需要时只需要通过@apply来引用即可,真的是很实用的一个功能,不由想起来了Javascript中的函数。

    如果某段代码是重复的,你不妨试试@apply

    mixins

    LESS 减少重复的另一种方式是让您指定可添加到其他规则中的一组规则。在 responsive.less 中,我使用了此 mixin 技术来跨两个不同的媒体查询表达常见规则,如清单 10 所示:

    清单 10. LESS 中 mixins 的使用

    CSS

    .media-body (@scale: 0.75) { #banner { width: (@bannerwidth * @scale); } #banner img { max-width: (@bannerwidth * @scale); max-height: (@mainheight * @scale); } #main { width: (@mainwidth * @scale - @extrabuffer); } #main-content { width: (@maincontentwidth * @scale * 0.75 - @extrabuffer); float: left; } #widget-container { width: (@widgetoutwidth * @scale * 0.75 - @extrabuffer); float: right; } .widget-content { width: (@widgetinwidth * @scale * 0.75 - @extrabuffer); } } //Rules for viewing from 401px to 800px @media (min-width: 401px) and (max-width: 800px) { .media-body; } //Rules for viewing smaller than 400px @media (max-width: 400px) { .media-body(0.3); //Extra manipulation of some rules #main-content { padding: 0px; } #widget-container { width: padding: 0px; } .widget-content { margin: 5px; } .widget-text { display: none; } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    .media-body (@scale: 0.75) {
      #banner { width: (@bannerwidth * @scale); }
      #banner img {
        max-width: (@bannerwidth * @scale);
        max-height: (@mainheight * @scale);
      }
      #main { width: (@mainwidth * @scale - @extrabuffer); }
      #main-content {
        width: (@maincontentwidth * @scale * 0.75 - @extrabuffer);
        float: left;
      }
      #widget-container {
        width: (@widgetoutwidth * @scale * 0.75 - @extrabuffer);
        float: right;
      }
      .widget-content {
        width: (@widgetinwidth * @scale * 0.75 - @extrabuffer);
      }
    }
     
    //Rules for viewing from 401px to 800px
    @media (min-width: 401px) and (max-width: 800px) {
      .media-body;
    }
     
    //Rules for viewing smaller than 400px
    @media (max-width: 400px)  {
      .media-body(0.3);
      //Extra manipulation of some rules
      #main-content { padding: 0px; }
      #widget-container { width: padding: 0px; }
      .widget-content { margin: 5px; }
      .widget-text { display: none; }
    }

    Mixins 可以接受参数,比如 清单 10 中方框大小的比例因子。默认的比例因子是 0.75。清单 10 在可视区中使用从 401px 到 800px 的默认大小。为了在小于 400px 的尺寸下进行查看,比例因子被更改为 0.3,并且在该区域添加了一些额外规则。

    图 2 显示了 responsive.html 的浏览器显示,它使用了 responsive.less。我减小了浏览器的宽度,以满足小于 400px 的宽度的媒体查询,这样一来您就可以看到页面在小型移动设备上是什么样子。

    图 2. responsive.html 的低宽度浏览器输出

     新葡亰496net 21

    在我 Mac 上的 Safari 中,当浏览器宽度接近 500px 时,小于 400px 的宽度的媒体查询被触发。该行为引出了一个重要观点。媒体查询基于视区 这一概念。视区是可视浏览器空间的数量,用 CSS 像素进行定义,并通过设备和浏览器进行确定。CSS 像素不同于设备像素;例如,如果用户缩放浏览器视图,那么像素模型之间的关系就会发生变化(参见 参考资料)。此外,设备和浏览器设置的视区大小不同于实际显示的窗口大小。在 图 2 中就是如此:窗口大约是 500px,但 CSS 将其作为 400px 宽的视区加以处理。这一现象强调了这样一个事实:与所有 Web 开发技术一样,响应式设计需要完善的跨设备测试。

    未来的媒体查询

    结束语

    我是一名软件架构师兼开发人员,但绝不是一名 Web 设计人员。凭借 LESS,我可以利用我的编程技能快速开发更便于理解和维护的 CSS。变量和 mixins 使我能够快速做出调整,查看其效果,无需在整个 CSS 文件内四处移动,查找我需要进行相关更改的内容。

    响应式设计是经济适用的可管理移动 Web 设计中的一项公认的关键技术。它在针对打印等可访问性和其他演示模式的设计中也很有用。由于为应对媒体查询而应用的多种样式处理起来很繁琐,所以 LESS 简化和组织 CSS 代码的功能愈发有价值。

    赞 1 收藏 评论

    新葡亰496net 22

    1.自定义媒体查询

    使用自定义的媒体查询使之更加语义化,使用如下:

    CSS

    @custom-media --big-viewport (max-width:1100px); @media (--big-viewport) { body{ background-color:red; } }

    1
    2
    3
    4
    5
    6
    7
    @custom-media --big-viewport (max-width:1100px);
     
    @media (--big-viewport) {
      body{
        background-color:red;
      }
    }

    通过@custom-media来设置一个媒体规则。感觉没什么用?好吧,来看下一个功能。

    2.限制媒体查询范围

    以前如果我们想实现一个限制媒体查询的范围也许是这样的:

    CSS

    @media (min-width: 320px) and (max-width: 640px) { body{ background-color:red; } }

    1
    2
    3
    4
    5
    @media (min-width: 320px) and (max-width: 640px) {
      body{
        background-color:red;
      }
    }

    以上我们限制屏幕的宽在320到640之间时让页面背景变成红色,但现在我们可以这样:

    CSS

    @media (width >= 320px) and (width <= 640px) { body{ background-color:red; } }

    1
    2
    3
    4
    5
    @media (width >= 320px) and (width <= 640px) {
      body{
        background-color:red;
      }
    }

    是不是更加一目了然了,当然它还可以结合@custom-media来使用,如下:

    CSS

    @custom-media --noly-mobile (width >= 320px) and (width <= 640px); @media (--noly-mobile) { body{ background-color:red; } }

    1
    2
    3
    4
    5
    6
    7
    @custom-media --noly-mobile (width >= 320px) and (width <= 640px);
     
    @media (--noly-mobile) {
      body{
        background-color:red;
      }
    }

    自定义选择器

    想过自己来定义选择器吗,接下来我们就来实现一个,如下:

    CSS

    @custom-selector :--title h2,h3; .main :--title{ font-size:18px; font-weight:normal; }

    1
    2
    3
    4
    5
    6
    @custom-selector :--title h2,h3;
     
    .main :--title{
      font-size:18px;
      font-weight:normal;
    }

    自定义选择器通过@custom-selector来定义,后面跟随一个:--接着是自定义选择器的名称,后面是你需要定义的选择器,多个用逗号隔开,如果你不理解的话,可以看下面这段代码,以上和下面这段代码效果是一样的。

    CSS

    .main h2, .main h3{ font-size:18px; font-weight:normal; }

    1
    2
    3
    4
    5
    .main h2,
    .main h3{
      font-size:18px;
      font-weight:normal;
    }

    要说,上面这两段代码的区别,可能就是自定义选择器更加灵活以及方便吧。

    选择器嵌套

    选择器嵌套是我非常喜欢的一个功能,话说当初我使用预处理器就是因为它有这个功能,小二来一段不加盐的代码:

    CSS

    div { & h2 { font-size:16px; &.title{ color:red; } & span{ color:pink; } } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    div {
      & h2 {
        font-size:16px;
        &.title{
          color:red;
        }
        & span{
          color:pink;
        }
      }
    }

    它的效果和下面这段代码一样:

    CSS

    div h2 { font-size: 16px } div h2.title { color: red } div h2 span { color: pink }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    div h2 {
        font-size: 16px
    }
    div h2.title {
        color: red
    }
    div h2 span {
        color: pink
    }

    有没有一种再也不想用预处理器的冲动,另外对于媒体查询我们不需要用&来引用,直接在大括号中使用即可,如下:

    CSS

    div { @media (max-width:1100px) { background-color:red; } }

    1
    2
    3
    4
    5
    div {
      @media (max-width:1100px) {
        background-color:red;
      }
    }

    效果和下面这段代码一样:

    CSS

    @media (max-width:1100px) { div { background-color: red } }

    1
    2
    3
    4
    5
    @media (max-width:1100px) {
        div {
            background-color: red
        }
    }

    它还支持比较复杂的嵌套(规则嵌套),如下这段:

    CSS

    a{ @nest p &{ color:red; } }

    1
    2
    3
    4
    5
    a{
      @nest p &{
        color:red;
      }
    }

    规则嵌套需要使用关键字@nest,效果和下面这段一样:

    CSS

    p a{ color: red }

    1
    2
    3
    p a{
        color: red
    }

    颜色函数

    颜色函数通过color使用,如下:

    CSS

    body{ background-color:color(pink a(30%)); }

    1
    2
    3
    body{
      background-color:color(pink a(30%));
    }

    这段代码的意思是说给body添加了一个背景为pink的颜色并且透明度为30%,和下面这段代码一样:

    CSS

    body{ background-color:rgba(255, 192, 203, 0.3); }

    1
    2
    3
    body{
      background-color:rgba(255, 192, 203, 0.3);
    }

    当然你也可以使用其它的颜色表示法,如:

    CSS

    body{ background-color:color(#666 a(30%)); }

    1
    2
    3
    body{
      background-color:color(#666 a(30%));
    }

    这个还是比较方便的。

    更多这方面的功能可以到

    初始值

    我们知道一个div默认是块元素,那么如果你不想它默认变成块元素可以通过initial将它设置成初始值。如下:

    CSS

    div { display: initial; }

    1
    2
    3
    div {
      display: initial;
    }

    我才是真正的DIV,T_T

    我才是真正的DIV,T_T

    效果如图13.18所示

    新葡亰496net 23

    图13.18 初始值

    这里它之所以在一排了,是因为display的初始值就是inline,而为什么不将divdisplay设置成initial它默认是block是因为浏览器给div设置了默认样式,也就是说initial可以去掉浏览器默认样式。

    如果你想去掉一个元素中的所有浏览器默认样式,可以这样:

    CSS

    div{ all:initial; }

    1
    2
    3
    div{
      all:initial;
    }

    但不是特别建议你这样,最好还是根据需求来。

    cssnext插件使用

    cssnext插件允许你在CSS中写未来版本的CSS,它会将这些代码转换成浏览器兼容的代码,不过要使用cssnext我们还得下载一个postcss,那么postcss是什么呢?官方是这样说的:

    使用JavaScript来转换CSS的工具

    1
    使用JavaScript来转换CSS的工具

    这里并不想详细的讲解postcss是什么,更多关于postcss的说明可以到

    1. 安装postcss-cli

    npm install postcss-cli -g

    1
    2
    npm install postcss-cli -g
     
    1. 下载完以后,我们接着下载cssnext如下:

    npm install postcss postcss-cssnext -g

    1
    npm install postcss postcss-cssnext -g

    为了方便我们这里使用的是命令行工具,如果想在命令行工具中使用postcss需要下载postcss-cli,这里我们是通过npm来下载的,npm是一个包管理工具,这里不做讲解,如果你不知道npm是什么,我想,你应该是前端新人,建议如果遇到不懂的通过搜索引擎来搜索。npm官网

    这些都成功安装完以后我们就可以开始使用它了,如下:

    postcss styles.css -u postcss-cssnext -d dist

    1
    postcss styles.css -u postcss-cssnext -d dist

    效果如图13.19所示

    新葡亰496net 24

    图13.19 输入这段代码

    以上这段代码的意思是用postcss-cssnext这个插件将styles.css里面的代码转换成兼容的代码,-d表示要输出到哪个目录,-w可以用来监听文件的变化,当文件变化时会自动输出文件,如下:

    postcss styles.css -u postcss-cssnext -w -d dist

    1
    postcss styles.css -u postcss-cssnext -w -d dist

    更多方法可以访问

    具体效果如下:

    源代码:

    CSS

    :root{ --main-color:red; } div{ display:flex; } span{ color:var(--main-color); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    :root{
      --main-color:red;
    }
    div{
      display:flex;
    }
    span{
      color:var(--main-color);
    }

    转换后的代码:

    CSS

    div{ display:-webkit-box; display:-ms-flexbox; display:flex; } span{ color:red; }

    1
    2
    3
    4
    5
    6
    7
    8
    div{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
    }
    span{
      color:red;
    }

    完。

    打赏支持我写出更多好文章,谢谢!

    打赏作者

    打赏支持我写出更多好文章,谢谢!

    任选一种支付方式

    新葡亰496net 25 新葡亰496net 26

    1 赞 2 收藏 评论

    关于作者:追梦子

    新葡亰496net 27

    快乐一直在我们身边,不管你身处何地何时,只要心是快乐的,一切都是快乐的。是那一秒,也是那一秒,都不会改变。 个人主页 · 我的文章 · 8 ·    

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:变量让你轻松制作响应式网页,响应式Web设计实

    关键词: