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

响应性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文件,这样我们就方便多了,如下:

转载于:https://www.cnblogs.com/tugenhua0707/p/4690986.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/431539.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uploadify java 上传_jquery使用uploadify插件实现多文件的上传(java版)

2、安装&#xff0c;由于下载下来的例子是php版本的&#xff0c;所以我只留下了主要的几个文件。如图&#xff1a;4、使用前台页面&#xff1a;pageEncoding"UTF-8"%>html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR…

js 多个定时器_JS中的同步/异步编程

1. 进程(process)/线程(thread)进程process&#xff1a; 电脑端安装很多的应用软件&#xff0c;每当运行一个应用程序&#xff0c;相当于开辟一个进程&#xff08;而对于浏览器来说&#xff0c;每新建一个页卡访问一个页面&#xff0c;都是新开辟一个进程&#xff09;任务管理器…

Android WebView Long Press长按保存图片到手机

<span style"font-size:18px;">首先要先注册长按监听菜单private String imgurl "";/**** 功能&#xff1a;长按图片保存到手机*/Overridepublic void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) {super.onCreateCo…

specification java_使用JPA实现Specification规范模式 -解道Jdon

使用JPA实现Specification规范规格模式由DDD之父 Eric Evans 和OO之父 Martin Fowler定义的规范(Specification也称规格模式)模式article 越来越受到广泛应用&#xff0c;本文介绍如何使用JavaEE 持久层规范JPA实现规格模式&#xff0c;其实现思想也适合其他持久层框架。案例源…

sublime用cmd窗口调试python_如何使用xdebug和sublime调试python脚本

然后我去了XDebug.崇高-设置&#xff0c;但我不确定如何配置它(我链接到什么&#xff0c;它需要什么网址&#xff0c;等等…){// For remote debugging to resolve the file locations// it is required to configure the path mapping// with the server path as key and loca…

Tomcat免安装版的环境变量配置以及Eclipse下的Tomcat配置和测试

Tomcat是目前比较流行的开源且免费的Web应用服务器&#xff0c;在我的电脑上第一次安装Tomcat&#xff0c;再经过网上教程和自己的摸索后&#xff0c;将这个过程 重新记录下来&#xff0c;以便以后如果忘记了可以随时查看。 注意&#xff1a;首先要明确一点&#xff0c;Tomcat与…

java开发和structs的关系_java---springMVC与strutsMVC的区别

项目刚刚换了web层框架&#xff0c;放弃了struts2改用spring3mvc当初还框架的时候目的比较单纯---springmvc支持rest&#xff0c;小生对restful url由衷的喜欢不用不知道 一用就发现开发效率确实比struts2高我们用struts2时采用的传统的配置文件的方式&#xff0c;并没有使用传…

python unicode error_关于GAE中运行python出现unicode decode error

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼老问题了&#xff0c;但因为本人不会python语法但却要用&#xff0c;找了很久解决办法&#xff0c;比如添加一行# -*- coding: utf-8 -*-但还是不行。。主要errorUnicodeDecodeError: *ascii* codec can*t decode byte 0xb0 in pos…

【推荐】介绍两款Windows资源管理器,Q-Dir 与 FreeCommander XE(比TotalCommander更易用的免费资源管理器)...

你是否也像我一样&#xff0c;随着硬盘、文件数量的增加&#xff0c;而感到对于文件的管理越来越乏力。 于是我试用了传说中的各种软件&#xff0c;包括各种Explorer外壳&#xff0c;或者第三方资源管理器。 最后我确定下来经常使用&#xff0c;并推荐给您的是这两款软件&#…

java rpg项目代码_java rpg游戏代码(移动保存读取)

package ggg;import java.awt.*;import java.awt.event.*;import javax.swing.*;import java.util.*;import java.io.*;public class Tank1 extends JFrame{//用来存储对应的图片的二维数组 (这里的icon数组&#xff0c;只是用来将我们设置好的数组在界面上显示出来&#xff0…

java类加载器_java底层内功 第一章,类加载器的任性

java类是怎么加载的&#xff1f;类加载机制JVM主要包含三大核心部分&#xff1a;类加载器&#xff0c;运行时数据区和执行引擎。虚拟机将描述类的数据从class文件加载到内存&#xff0c;并对数据进行校验&#xff0c;准备&#xff0c;解析和初始化&#xff0c;最终就会形成可以…

Java学习二:Javac Java的学习(原创)

安装完了JDK&#xff0c;就可以编译、执行简答的Java程序了&#xff0c; 一、Javac ,Java 路径名和包名的关系&#xff1a; 在D盘下&#xff0c;建文件夹Test&#xff0c;在Test里创建文件Java1.java(类名要与文件名一致&#xff09; Java1.java : package Test; public c…

java的requestmapping_SpringMVC RequestMapping 详解

SpringMVC RequestMapping 详解RequestMapping这个注解在SpringMVC扮演着非常重要的角色&#xff0c;可以说是随处可见。它的知识点很简单。今天我们就一起学习SpringMVC的RequestMapping这个注解。文章主要分为两个部分&#xff1a;RequestMapping 基础用法和RequestMapping 提…

redis查询所有key命令_想在生产搞事情?那试试这些 Redis 命令

作者&#xff1a;鸭血粉丝出自&#xff1a;Java极客技术原文&#xff1a;mp.weixin.qq.com/s/WeAamgYYGQfxlsppsn9_lg哎&#xff0c;最近阿粉又双叒叕犯事了。事情是这样的&#xff0c;前一段时间阿粉公司生产交易偶发报错&#xff0c;一番排查下来最终原因是因为 Redis 命令执…

PrintArea打印,@media screen解决移动web开发的多分辨率问题,@media print设置打印的样式...

PrintArea打印&#xff0c;局部DIV打印插件&#xff0c;依赖JQuery。 github:https://github.com/RitsC/PrintArea 当打印时需要临时改变页面布局&#xff0c;可以使用 media print{ /* * CSS */ } 打印时生效&#xff0c;打印完自动失效。 需要屏幕自适应&#xff0c;或多种分…

java arraycopyof_Java中System.arraycopy()和Arrays.copyOf()的区别

System.arraycopy()这是一个由java标准库提供的方法。用它进行复制数组比用for循环要快的多。arraycopy()需要的参数有&#xff1a;源数组&#xff0c;从源数组中的什么位置开始复制的偏移量&#xff0c;目标数组&#xff0c;从目标数组中的什么位置开始复制的偏移量&#xff0…

python 异步 生产者 消费者_python 线程通信 生产者与消费者

1 """2 线程通信的生产者与消费者3 python的queue模块中提供了同步的线程安全的队列类,都具有原子性&#xff0c;实现线程间的同步4 Queue (FIFO&#xff1a; fist in fist out)5 LifoQueue (LIFO&#xff1a; last in fist out)6 PriorityQueue (优先级队列)78…

3、C#面向对象:封装、继承、多态、String、集合、文件(下)

面向对象多态 一、装箱和拆箱 装箱&#xff1a;将值类型转换为引用类型。object o 1&#xff1b;值类型给引用类型赋值 拆箱&#xff1a;将引用类型转换为值类型。int n (int)o; 强制转换为值类型 满足条件&#xff1a;两种类型是否存在继承关系。 int n Convert.ToInt32(&q…

mysql gui 分区_一文彻底搞懂MySQL分区

一.InnoDB逻辑存储结构首先要先介绍一下InnoDB逻辑存储结构和区的概念&#xff0c;它的所有数据都被逻辑地存放在表空间&#xff0c;表空间又由段&#xff0c;区&#xff0c;页组成。段段就是上图的segment区域&#xff0c;常见的段有数据段、索引段、回滚段等&#xff0c;在In…

js 获取域名_RapidDNS域名查询如何联动Goby

前言&#xff1a;http://RapidDNS.io 是一个秒级在线子域名和同IP域名的查询工具。目前拥有25亿条DNS记录&#xff0c;支持A、AAAA、CNAME、MX4种DNS记录类型。由于Goby程序对子域名收集方面不是很完善&#xff0c;这里特编写此插件作为其拓展。可以方便快速获取域名和ip地址信…