响应性web设计实战总结(二)

阅读目录

  • 背景知识:
  • Gulp-less安装及配置如下

对响应性web总结,之前总结过2篇文章;可以看如下:

http://www.cnblogs.com/tugenhua0707/p/4147569.html

http://www.cnblogs.com/tugenhua0707/p/4598657.html

今天我们再来讲解下 对于移动端,我们如何开发;

回到顶部

背景知识

针对移动端css媒体查询的开发,需要针对不同的手机写不同的媒体查询, 如下css代码:

// 针对独立像素在320px至359px之间的

@media (min-width: 320px) and (max-width:359px){}

// 针对独立像素在360至399像素的

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

// 针对独立像素在400至450像素的

@media (min-width: 400px) and (max-width:450px){}

// 针对 独立像素在 640至999像素的

@media (min-width: 640px) and (max-width:999px){}

如上css媒体查询编写代码,为了更好的提高效率及开发,我们需要对所有手机进行等比例缩放,

一:字体计算方法

比如我们可以使用rem对字体作为单位,对html元素设置10px来进行计算;如下html元素的字体:

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

假如现在设计稿给到我们前端的是720像素的话,那么在如上媒体查询字体,宽度和高度及margin,padding需要等比例缩放操作;

@media (min-width: 320px) and (max-width:359px){
     // 对于320-359 按照320px来计算
    /* 720/320 = 2.25*/
    html{font-size: 27.78%}  // 62.5% / 2.25
}
@media (min-width: 360px) and (max-width:399px){
     // 对于360-399按照360px来计算
    /* 720/360 = 2*/
    html{font-size: 31.25 %}  // 62.5% / 2
}
@media (min-width: 400px) and (max-width:450px){
     // 对于400-450按照400px来计算
    /* 720/400 = 1.8*/
    html{font-size: 34.72 %}  // 62.5% / 1.8
}
@media (min-width: 640px) and (max-width:999px){
     // 对于640-999按照640px来计算
    /* 720/640 = 1.125 */
    html{font-size: 55.56%}  // 62.5% / 1.125
}

二:width,height,margin及padding的计算方法

对于width,height,margin,padding针对不同的手机也是等比例缩放的,比如在720像素下的margin-top是40px;那么在320,360,400,640分别如下计算:(其他属性的也一样计算)

@media (min-width: 320px) and (max-width:359px){
    /* 720/320 = 2.25*/
    margin-top = 40px / 2.25
}

@media (min-width: 360px) and (max-width:399px){
        /* 720/360 = 2*/
    margin-top = 40px / 2
}
@media (min-width: 400px) and (max-width:450px){
    /* 720/400 = 1.8*/
    margin-top = 40px / 1.8
}
@media (min-width:640px) and (max-width:999px){
    /* 720/640 = 1.125 */
    margin-top = 40px / 1.125
}

如上编写代码,我们可以看到,针对在PC端的代码我们写在最顶端,也就是针对PC端做一份,针对移动端也做一份页面,因此在PC端的css代码下面添加css媒体查询;

/* PC端代码如下 */

………….

// 如上是所有的PC端的css代码;

那么移动端的css代码,如果有和PC端不同的话,我们需要在下面编写媒体查询进行覆盖掉;如下是css媒体查询代码;

……….. // css媒体查询代码

css媒体查询代码写完,我们发现针对width,height,margin,padding无非就是除以倍数(比如720的页面相对于要在640页面上的 那么倍数是1.125,无非使用width/1.125)等属性;因此我们想要是和JS一样要是能定义一个变量那该多好了,因此想到预编译css中的less(当然sass,stylus都可以),使用less运算,那么代码变成如下:

@media (min-width: 320px) and (max-width:359px){
    /* 720/320 = 2.25*/
    @multiple: 2.25;
    // 下面是所有的代码
    .xx {width:40px / @multiple; margin: 40px / @multiple;padding: 40px / @multiple; }
}
@media (min-width: 360px) and (max-width:399px){
        /* 720/360 = 2*/
    @multiple: 2;
    // 下面是所有的代码
    .xx {width:40px / @multiple; margin: 40px / @multiple;padding: 40px / @multiple; }
}
@media (min-width: 400px) and (max-width:450px){
    /* 720/400 = 1.8*/
    @multiple: 1.8;
    // 下面是所有的代码
    .xx {width:40px / @multiple; margin: 40px / @multiple;padding: 40px / @multiple; }
}
@media (min-width:640px) and (max-width:999px){
    /* 720/640 = 1.125 */
    @multiple: 1.125;
    // 下面是所有的代码
    .xx {width:40px / @multiple; margin: 40px / @multiple;padding: 40px / @multiple; }
}

如上定义一个变量来编写代码,看着上面代码,我们又发现代码不好,太繁琐了,针对移动所有的设备中的  “下面所有的代码”注释那块 下面的代码都是一样的,我们现在又在考虑,要是css能和JS一样能够公用那该多好啊,于是我们想着使用less运算方法;我们可以使用.mixin() 这样的(名字自己取)

把公用的代码写到.mixin()里面去;如下:

.mixin() {

// 下面是所有的公用的代码

}

在如下各个条件下如下引用即可:

@media (min-width: 320px) and (max-width:359px){
    /* 720/320 = 2.25*/
    @multiple: 2.25;
    .mixin();
    // 下面可以写自己私有的css
 }
@media (min-width:360px) and (max-width: 399px) {
    /* 720/360 = 2*/
    @multiple: 2;
    .mixin();
     // 下面可以写自己私有的css
 }
 @media (min-width: 400px) and (max-width:450px){
    /* 720/400 = 1.8*/
    @multiple: 1.8;
    .mixin();
     // 下面可以写自己私有的css
 }
 @media (min-width: 640px) and (max-width:999px){
    /* 720/640 = 1.125*/
    @multiple: 1.125;
    .mixin();
    // 下面可以写自己私有的css
 }

如上,一切都很完美了,但是我们知道我们现在是写的是less文件里面,因此如果我们想要看到页面效果,我们需要对less文件进行编译下即可;进入对应的目录后,如下编译即可:

lessc index.less > index.css

意思是把index.less文件目录下生存index.css,因此我们直接在页面上和以前一样引入index.css即可;如下使用link引入的:

<link rel="stylesheet" href="./css/index.css" media="all"/>

和之前引入css没有任何区别。

但是我们现在发现一个很烦的问题,我们每次改了下less文件后,不能和以前改css文件那样,改完后后立即刷新页面就可以看到效果,有时候我刷新半天,咦!!为什么没有生效了?思考下 发现原来这是less文件,我们需要进行编译下即可,但是每次改动下,我们都需要进行编译,这个动作好烦,也很累,相信大家都一样,因此我们需要考虑的是less有没有能实时监听的,能否实时编译的,也就是说只要我改动less文件,它就能实时编译成css文件,这样我们效率明显提高了!就这样搜索下 找到有grunt和gulp,在这里我们使用gulp-less插件来监听(不使用grunt插件,因为grunt配置没有gulp方便);

回到顶部

Gulp-less安装及配置如下

首先我们需要知道的是先要安装node及npm包管理器,有了这个环境后,我们就可以安装Gulp;

Gulp安装教程如下 http://www.dtao.org/archives/18  这边就不对gulp进行介绍了;

现在我们先来看看我本地目录结构:

1.  我们需要在本地手动或者 自动(使用命令npm init) 生成package.json文件;进入项目的根目录下,使用命令如下:

填写后完后,在根目录下会生成一个package.json文件 ,我们再来查看下 package.json内容如下:

{
  "name": "app2",
  "version": "1.0.0",
  "description": "this is for study gulp project",
  "main": "index.js",
  "dependencies": {
    "gulp-less": "^3.0.3",
    "gulp": "^3.9.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "test"
  },
  "repository": {
    "type": "git",
    "url": "http://www.github.com/xx"
  },
  "keywords": [
    "gulp-less"
  ],
  "author": "tugenhua",
  "license": "ISC"
}

我们现在再来看看目录结构变成如下:

2. 本地安装gulp及gulp-less; 进入项目的根目录后 运行如下命令 npm install gulp –save-dev 在本地安装gulp

运行命令:npm install gulp-less  --save-dev

如上后 说明安装成功了;

我们现在可以查看我们根目录下 多了一个node_moudles文件夹,点击进入后 有gulp和gulp-less文件夹,如下所示:

现在我们再来看看package.json内容如下:

{
  "name": "app2",
  "version": "1.0.0",
  "description": "this is for study gulp project",
  "main": "index.js",
  "dependencies": {
    "gulp-less": "^3.0.3",
    "gulp": "^3.9.0"
  },
  "devDependencies": {
    "gulp-less": "^3.0.3"
  },
  "scripts": {
    "test": "test"
  },
  "repository": {
    "type": "git",
    "url": "http://www.github.com/xx"
  },
  "keywords": [
    "gulp-less"
  ],
  "author": "tugenhua",
  "license": "ISC"
}

接着我们需要在根目录下创建gulpfile.js 代码如下:

//导入工具包 require(‘node_modules里对应模块‘)
var gulp = require(‘gulp‘), //本地安装gulp所用到的地方
less = require(‘gulp-less‘);
//定义一个testLess任务(自定义任务名称)
gulp.task(‘testLess‘, function () {
 gulp.src(‘./css/index.less‘) //该任务针对的文件
    .pipe(less()) //该任务调用的模块
    .pipe(gulp.dest(‘./css‘)); //将会在src/css下生成index.css
});
gulp.task(‘testWatch‘, function () {
   gulp.watch(‘./css/*.less‘, [‘testLess‘]); //当所有less文件发生改变时,调用testLess任务
});
//gulp.task(‘default‘,[‘testLess‘]); //定义默认任务
//gulp.task(name[, deps], fn) 定义任务  name:任务名称 deps:依赖任务名称 fn:回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs:处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径

执行命令

在命令行中 执行 gulp testWatch 即可 注意:该命令执行后需要处于打开状态,关闭命令后监听事件结束。

上面是基本使用,如果需要编译多个less文件 代码如下:

现在当我们手动修改less文件后,会自动编译成css文件,这样我们就方便多了,如下:

时间: 07-29

响应性web设计实战总结(二)的相关文章

响应性web设计实战总结

响应性web设计实战 响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整.具体的实践方式由多方面组成,包括弹性网格和布局,图片,css Media(媒体查询)使用等. 一:布局方式有如下几种:       1. 固定布局:固定布局以PX(像素)作为单位的,在PC端,设计稿多少PX就写多少PX,前几年都是这种布局,常见的是以960px或者1000px来设计的,但是这样设计有如下缺点: 1.页面很死板,在更大的屏幕上,页面左

【01】《响应式Web设计:HTML5和CSS3实战》

[01] (魔芋:已看完.) [01]<响应式Web设计:HTML5和CSS3实战>(非扫描版)(全).pdf 共246页. 2013年1月出版. 读后感:适合入门的书籍,对于响应式布局,用了一个例子来讲解.后半部分讲了一些CSS3的新属性.阴影,transform,transition等. [英]ben frain 著 王永强 译

css014 响应式web设计

css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. 二.    为RWD构建网页 1.            手机浏览器中为了忽略手机浏览器屏幕变小字体也变小的行为,可在head中添加一行代码: <meta name="viewport" content="width=vedice-width"> 最好是添加

Wicket实战(二)hello world

上次的博文Wicket实战(一)概述中给大家简单介绍了一下关于Wicket的概念性内容,今天我们完成第一个Wicket实例-Hello World! 1.Hello World原版 在Wicket的官方网站上,为我们提供了一个Hello World的实例,链接地址如下: http://wicket.apache.org/learn/examples/helloworld.html 在官方的Hello World实例中,大致做了这么几个工作: 1).创建HelloWorldApplication.

[Java聊天室server]实战之二 监听类

前言 学习不论什么一个稍有难度的技术,要对其有充分理性的分析,之后果断做出决定---->也就是人们常说的"多谋善断":本系列尽管涉及的是socket相关的知识,但学习之前,更想和广大程序猿分享的是一种心境:学习是一个循序渐进的过程,心态应该随时调节,保持戒骄戒躁的状态.比方近期在看网易公开课MIT<算法导论>,老师提到,学习算法之前要计算机数学+离散数学+概率论等课程的知识,所以一直学不好算法的程序猿最好还是从基础入手,这都是中国式教育惹的祸啊!(此处省略一万字...

用产品思维设计API(二)——数据解耦,才是前后分离的本质

用产品思维设计API(二)--数据解耦,才是前后分离的本质 前言 最近公司内部在重构项目代码,包括API方向的重构,期间遇到了很多的问题,不由得让我重新思考了下. - 一个优雅的API该如何设计? - 前后端分离之后,API真的解耦分离了吗? - 不断的版本迭代,API的兼容性该如何做? ps.这里所说的API仅为Web API,提供APP\WEB开发使用. 年前,我司内部的接口已经进入了一个完全的重构阶段,参考了市面上各大平台的API和文档,自己也总结出了很多的心得.这里向大家分享一下,接下来

海康威视频监控设备Web查看系统(二):服务器篇

声明:本系列文章只提供交流与学习使用.文章中所有涉及到海康威视设备的SDK均可在海康威视官方网站下载得到.文章中所有除官方SDK意外的代码均可随意使用,任何涉及到海康威视公司利益的非正常使用由使用者自己负责,与本人无关. 前言: 上一篇文章<海康威视频监控设备Web查看系统(一):概要篇>笼统的介绍了关于海康视频中转方案的思路,本文将一步步实现方案中的视频中转服务端.文中会涉及到一些.net socket处理和基础的多线程操作.我用的是SDK版本是SDK_Win32_V4.2.8.1 .大家根

响应式WEB设计:将导航菜单转换成下拉菜单以适应小屏幕设备

移动互联网时代的到来,使得我们在进行页面设计与开发时,应当根据用户行为以及设备环境(系统平台.屏幕尺寸)进行相应的响应和调整,这个理念也叫响应式WEB设计.今天我将给大家讲解当屏幕尺寸变小时,将横向菜单转换成下拉菜单的效果. 本文使用了HTML5标签以及CSS3技术,您在查看demo时需要您的浏览器支持HTML5和CSS3,建议使用Chrome,Firefox或者IE9等现代浏览器. HTML <nav> <ul> <li><a href="/"

NET 领域驱动设计实战系列总结

NET 领域驱动设计实战系列总结 一.引用 其实在去年本人已经看过很多关于领域驱动设计的书籍了,包括Microsoft .NET企业级应用框架设计.领域驱动设计C# 2008实现.领域驱动设计:软件核心复杂性应对之道.实现领域驱动设计和Asp.net 设计模式等书,但是去年的学习仅仅限制于看书,当时看下来感觉,领域驱动设计并没有那么难,并且感觉有些领域驱动设计的内容并没有好的,反而觉得有点华而不实的感觉,所以去年也就放弃了领域驱动设计系列的分享了,但是到今年,在博客园看到还是有很多人写领域驱动的