Articles19
Tags0
Categories0

响应式网站设计

响应式网站设计

一.实践原则

1.响应式网站概念

1).flexible gird layout 弹性网站布局

2).flexible image 弹性图片

3).media queries 媒体查询

响应式网站是一个设计理念,它是多项技术的综合体。多出来的工作量是JS脚本,css样式做一些改动,每个设备都能得到正确的设计

2.progressive enhancement

渐进增强,指从最基本的可用性出发,在保证站点页面在低级浏览器中 的可用性和可访问性的基础上,逐步增加功能及提高用户体验。

3.graceful degradation

优雅降级,指首先使用最新的技术面向高级浏览器构建最强的功能及用户体验,然后针对低级浏览器的限制,逐步衰减那些无法被支持的功能及体验

4.选择断点(媒体查询)

参考分成几种类型:0-480(小屏幕)481-800(中)801-1400(大)1400+(巨)

二.媒体查询

1.

<link rel="stylesheet"type="text/css"href="site.css"media="screen"/> //屏幕
<link rel="stylesheet"type="text/css"href="print.css"media="print"/>  //打印
@media all and (min-width:800px)and(orientatiopon:landscape){
...
}

all:用来指媒体类型,all是所有媒体类型都实用,类型有 screen或print

and:连接,其他连接词:not 、only、or

@media not screen and (color),print and (color){
...
}
等价与
@media not screen and (color) or print and (color){
...
}
逗号的作用等同与or

only:防止老旧的浏览器,不支持带媒体属性的查询而应用到给定的样式

2.css3媒体属性:

1)width,height(视口)

2)device-width device-height(设备,表面)

3)orientation(设备处于横向还是纵向)

4)aspect-ratio(基于视口宽高比)

5)device-aspect-ratio(渲染表面(设备屏幕)的宽度)

6)color(每种颜色的位数)

7) resolution(分辨率)

3.一些概念

视口(viewport):桌面电脑端的视口是浏览器窗口的可视区域,移动设备端的视口比桌面电脑端的概念稍微复杂些,分为可视视口、理想视口、布局视口

1)布局视口(layout viewport):在默认情况下给了viewport一个比较宽的值,目的就是为了那些为桌面电脑端设计的网站也能在移动设备上正常显示。这个viewport视口就叫做布局视口

2)可视视口:手机端显示的大小

在调试的时候:缩放改变可视视口大小不改变布局视口大小

3)理想视口:为构建手机浏览器优化的页面而添加的,是布局视口在一个设备上的最佳尺寸

开发时需要指定一下属性,使布局视口变为理想视口

<meta name='viewport'content="width=device-width"/>

参考百度的头:

<meta name="viewport"content="width=device-width"
minimum-scale=1.0, //最小的缩放比例
maximum-scale=1.0,//最大的缩放比例
user-scalable=no'/>//禁用了用户缩放

三.一些有用的文件

1.robots.txt:用于搜索引擎来访问网站时第一个查看的文件(什么可以看什么不可以看,爬虫程序)

User0agent:*
Disallow:/admin/
//除了admin文件夹下的其他都可以访问

2.favicon.ico:图标文件,用于地址栏的图标

3.humans.txt:保存网站建设者信息

4..editorconfig:统一代码工具(插件)

#editorconfig.org 注释
root=true #最顶层
[*]#应用所有文件
charset=utf-8 #编码格式
indent_size=4 #缩进尺寸
indext_style=space#使用空格缩进
insert_final_newline=true #每个文件以空白行结尾
trim_trailing_whitespace=true#清除没必要的空格
[*.md]
rim_trailing_whitespace=false

5)LICNESN.txt:协议,版权说明

6)CHANGELOG.md:项目每个版本的更新,说明版本号,更新内容,修复了哪些问题等

四.建立html文件

1.IE浏览器的兼容

<!--[if lte IE8]>
<p>如果时低于IE8的浏览器就显示这段话</p>
 <![endif]-->
//gt:大于
//lt:小于
//gte:大于等于
//lte:小于等于
<meta http-equiv="X-UA-Compatible" content="ie=edge">

2.关于统一浏览器css文件规则的两种文件,以消除不同浏览器加载css时显示差异

css resets:会清除所有原来的样式,如h1、h5都是同样大小的文字

normalize.css:会有一个基本默认的样式

3.关于页面布局:利用html5的标签

 <header>网页头部</header>
 <div>
   <section>区块:广告等</section>
 </div>
 <footer>网页尾部</footer>
 <nav>导航链接</nav>
 <article>可以完整被外面引用的元素,特殊的section</article>

 <b>注意</b>
 <em>强调</em>
 <i>不同的语义</i>

快速建立列表:ul>li*5>a

五.桌面端css文件

此处先以桌面谷歌浏览器为标准,加入样式文件

1.采用rem单位:

em:相对参照物为父元素的font-size,有继承特点若没有设置,浏览器会有一个默认的em设置:1em=16px,容易混乱

rem :相对参照物为根元素html

font-size:62.5% 1rem=10px(10/16*100%)

font-size:100% 1rem=16px

2.一些常用的css

1)页面样式

body{
  font-size:1.2rem;
  line-height: 1.5;
  background: #f7f7f7;
}
a{
  color:#666;
  text-decoration: none;
}
a:hover,a.active{
color:#0ae;
text-decoration: underline;
}
html{
  font-size:62.5%;
  color:#222;
}
::selection{
  background-color: #b3b4fc;
  text-shadow: none;
}
ul{
  margin:0;
  padding:0
}
/* 去掉小圆点 */
li{
  list-style:none
}

2)工具样式

/* 在父元素中居中显示 */
.center-block{
  display: block;
  margin-right:auto;
  margin-left:auto;
}

.pull-right{
  float:right !important
}
.pull-left{
  float:left !important
}
.text-right{
  text-align: right !important;
}
.text-left{
  text-align: left !important;
}
.text-center{
  text-align: center !important;
}
/*隐藏元素并不占空间*/
.hide{
  display: none !important;
}
.show{
  display:block !important;
}
/*隐藏元素,但是原本占用的空间还在*/
.invisible{
  visibility:hidden
  /* 不会挤占空间 */
}
/* 隐藏文本 */
.text-hide{
  font:0/0 a;
  color: transparent;
  text-shadow: none;
  background-color:transparent ;
  border: 0;
}
/* 清除浮动 */
.clearfix:after{
  content:'.';
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
  }
  .clearfix{
  zoom:1}
/* 浏览器更新提示 */
.browserupgrade{
  margin:0;
  padding:1rem;
  background:#ccc
}

3.清除浮动的方法:

1)在浮动的元素最后加上

<div style="clean:both"></div>

2) 在包裹的元素的css样式添加:over-flow:auto(hidden)

3) 让父元素也浮动:影响布局

4)

.clearfix:after{
content:'.';
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
zoom:1
}

5)触发bfc,就可以消除浮动

会触发bfc的元素:

float

over-flow

display:table-cell/table-caption/inline-block

position:fixed/absolute

如,利用display:table消除浮动

.clearfix:after{
content:'.';
display:table;
clear:both;
}
/*或者*/
.clearfix:before{
content:'';
display:table;
}
.clearfix:after{
clear:both;
}

4.html空白符问题:在如li或div元素换行的时候,html会加上一些空格

解决方式:

1).在父节点样式添加font-size:0

2).闭合标签写在下面

3).li不闭合

4).设置父的边距

5)white-space-collapsing(有可能不支持)

5.图片精灵:减少服务器压力,加快加载,父元素加载一张大图片,子元素采用定位拿取图片一部分

footer ul li .icon{
  display: inline-block;
  /* 文字的缩进 来隐藏掉这些文字*/
  text-indent: -999rem;
  margin-right:1.5rem;
  background: url(https://i.alipayobjects.com/e/201307/jebmKcbrh.png) no-repeat;
  background-size:466px 477px;
  overflow:hidden;
}
footer ul li .icon-zfywxk{
  width: 38px;
  height:27px;
  /* 定位 */
  background-position:-369px -45px;
}
footer ul li .icon-pcirk{
  width:78px;
  height: 27px;
  background-position: -110px -96px;
}

6.其他样式设置:

1).让所有li元素在一行显示:

header .top  ul li{

2).设置不包括第一个列表元素的样式

header .top ul li + li{
  /* 不包括第一个元素 */
  border-left: 1px solid #999;
  margin-left: -3px;
}

3).使得a元素可以设置高度:

header .top  ul li a{
  /* 因为a是line元素,不设置inline-block高度不会起作用 */
  display:inline-block;
  padding: 0 1.5rem;
  color:#fff
}

4).不影响元素里面的元素的透明度设置:

background:rgba(255, 255, 255, 0.9);

5).动态计算

.feature .item{
  display: inline-block;
  /* 动态计算 ,3等分,减去padding 2rem margin 1.5*2rem/3,所以总共减去3rem*/
  width:calc(33.33333333333% - 3rem);
  padding: 1rem;
  font-size: 1.4rem;
  background-color: #fff;
  box-shadow: 0 0 4px #ccc;
}

6).不换行,以省略号代替超过的文本

.notice a:first-child{
  /* 不换行 过长有省略号*/
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
/*在元素前面添加内容*/
.notice a:first-child:before{
  /* 00a0:不换行的空格 */
content:'最新公告: \00a0\00a0';
color: #aaa;
}

7).给图片加滤镜,变成别的颜色

.footer-content .brand{
  float: left;
  display: block;
  /* 灰色滤镜 */
  filter:grayscale(100%);
  -webkit-filter:grayscale(100%) ;
  width: 20%;
  height:35px;
  background:url('../img/logo@1x.png') no-repeat left;
  background-size: 150px 35px; 
}

六.安卓端css

此处安卓端有中,小两个不同的设计,利用媒体查询针对不同的地方重写部分样式,相同的样式不需要重写

此处断点为小屏幕:小于480,480-800之间,大于800(浏览器)

媒体查询的写法有两种,一是写在css文件最尾部,二是每个块下面写每个块的媒体查询

第二种方式比较好维护

/*以网页顶部为例*/
/* 网络头部 */
header{
  width:100%
}
header .top {
 line-height: 3rem;
 padding: 0 1.5rem;
 color:#fff;
 background: #555;
 border-bottom: 1px #ecc000 solid;
}
header .top .tel{
  float:left
}
header .top ul{
  text-align: right;
}
header .top  ul li{
  /* 让所有li元素在一行显示 */
  display:inline-block
}
header .top ul li + li{
  /* 不包括第一个元素 */
  border-left: 1px solid #999;
  margin-left: -3px;
}
header .top  ul li a{
  /* 因为a是line元素,不设置inline-block高度不会起作用 */
  display:inline-block;
  padding: 0 1.5rem;
  color:#fff
}
@media only screen and (max-width:800px){
  header .top  ul li a{
    padding: 0 1rem;
  }
}
@media only screen and (min-width:481px) and (max-width:800px){
}
@media only screen and (max-width:480px){
  header .top .tel,
  /* css3选择器 */
  header .top  ul li:nth-child(3),
  header .top  ul li:nth-child(4){
    display: none;
  }
}

此处的媒体查询:

@media only screen and (max-width:800px){
}
@media only screen and (min-width:481px) and (max-width:800px){
}
@media only screen and (max-width:480px){}

当屏幕宽度小于480px时在执行第三个媒体查询时会继承第一个媒体查询,可以在第一个媒体查询写下面两种情况的共同处,减少冗余。

若媒体查询要针对浏览器而言,就应该使用1em=16px的换算来使用em

浏览器的调试:使用responsive,可以拖动控制宽度,谷歌的开发者工具中右边的3个小点有许多方便的工具如标尺showrules

一些页面在小屏幕的错位可能是浮动的原因,可以试着清除浮动解决

七.轮播图组件

1.OwlCarousel2

在main.js添加配置项:

$(document).ready(function(){
  $(".owl-carousel").owlCarousel({
    items:1,
    loop:true,
    autoplay:true,
    autoplayTimeout:3000,
    autoplayHoverPause:true
  });
})

使用:

<section class="ad">
      <div class="owl-carousel owl-theme">
      <div class="item">
        <picture>
          <source src-set="img/ad001-l.png"media="(min-width:50em)">
            <source src-set="img/ad001-m.png"media="(min-width:30em)">
              <img src="img/ad001.png" alt="年度报告"/>
        </picture>
      </div>
      <div class="item">
          <picture>
              <source src-set="img/ad002-l.png"media="(min-width:50em)">
                <source src-set="img/ad002-m.png"media="(min-width:30em)">
                  <img src="img/ad002.png" alt="红包"/>
            </picture>
      </div>
      <div class="item">
          <picture>
              <source src-set="img/ad003-l.png"media="(min-width:50em)">
                <source src-set="img/ad003-m.png"media="(min-width:30em)">
                  <img src="img/ad003.png" alt="新手秘籍"/>
            </picture>
      </div>
    </div>
    </section>

2.如何挑选第三方组件:

1).使用人数

2).是否开源

3).文档是否齐全

4).活跃性

5).小巧够用即可

八.响应式图片

若在移动端加载桌面端的图片(像素比较大),虽然会非常清晰,但是耗费过多的流量,加载慢,用户体验不好,需要在不同大小的设备加载不同大小的图片

方法如下:

1.原生:根据窗口大小选不同的图片

$(document).ready(function(){

function makeImageResponsive(){

var width=$(window).width();

var img=$('.content img');

if(width<=480){

img.attr('src','img/480.png');

}else if(width<=800){

img.attr('src','img/800.png');

}else{

img.attr('src','img/1600.png');

}

}})

2.srcset:提供多个图片,超过大小时候更换

<img class="image"scr="img/480.png" srcset="img/480.png 480w,img/800.png 800w,img/1600.png 1600w"sizes="100vw"/>
<img class="image"scr="img/480.png" srcset="img/480.png 480w,img/800.png 800w,img/1600.png 1600w"sizes="50vw"/>
<img class="image"scr="img/480.png" srcset="img/480.png 480w,img/800.png 800w,img/1600.png 1600w"sizes="(min-width:800px) 800px,100vw"/>
<img class="image"scr="img/480.png" srcset="img/480.png 480w,img/800.png 800w,img/1600.png 1600w"sizes="(min-width:800px) calc(100vw - 30em),100vw"/>

vw:视口单位

100:是100% ,100vw是100%的视口宽度,计算以sizes来决定

sizes的两个参数:媒体查询(可省略) 预估的尺寸

3.picture:可以结合媒体查询来选用

<picture>
<source media="(max-width:36em)"
srcset="img/ps.jpg 768w"/>
<source 
srcset="img/p1.jpg 1800w"/>
<source type="image/svg+xml"
srcset="logo.svg 480w,logo.svg 880w"/>
<source type="image/webp"
srcset="logo1.webp 480w,logo2.webp 880w"/>
<img src='img/p1.jpg'/>
</picture>

4.svg:可缩放的矢量图形,很难色彩丰富,图像逼真,兼容性强

九.兼容性与优化

1.polyfill:填平兼容性问题,防止浏览器不支持

 <script src="js/vendor//picturefill.min.js"></script>

2.优化

1)图片压缩:https://tinypng.com

2)浏览器同步测试工具:www.browsersync.cn

安装:

npm i -g browser-sync

启动:browser-sync start –server ‘src’ –files ‘src’(*.js)

3)在线压缩代码:https://javascript-minifier.com

4)打包代码的工具:

Grunt(www.gulpjs.com.cn):自动化构建工具

安装:npm i gulp –save-dev

在根目录下新建gulpfile.js

var gulp=require('gulp')

//任务定义

gulp.task('hello',fuction(){

console.log('Hello Gulp')

})

使用:gulp hello

安装插件:

npm i gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso –save-dev

gulp-rev:添加版本号

gulp-rev-replace:更新index的引用

gulp-useref:html 注释的方法写一些注释

gulp-filter:过滤器

gulp-watch:监听改变,自动执行任务

gulp-postcss:自动添加css文件中浏览器前缀

gulp-concat:多个文件合并成一个文件

gulp-responsive:响应式图片

var app = {  // 定义目录
    srcPath:'src/',
    buildPath:'build/',
    distPath:'dist/'
}

/*1.引入gulp与gulp插件   使用时,要去下载这些插件*/
var gulp = require('gulp');
var less = require('gulp-less');
var cssmin = require('gulp-cssmin');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var connect = require('gulp-connect');
var imagemin = require('gulp-imagemin');
var open = require('open');

/*把bower下载的前端框架放到我们项目当中*/
gulp.task('lib',function () {
    gulp.src('bower_components/**/*.js')
        .pipe(gulp.dest(app.buildPath+'lib'))
        .pipe(gulp.dest(app.distPath+'lib'))
        .pipe(connect.reload()) //当内容发生改变时, 重新加载。
});



/*2.定义任务 把所有html文件移动另一个位置*/
gulp.task('html',function () {
    /*要操作哪些文件 确定源文件地址*/
    gulp.src(app.srcPath+'**/*.html')  /*src下所有目录下的所有.html文件*/
        .pipe(gulp.dest(app.buildPath)) //gulp.dest 要把文件放到指定的目标位置
        .pipe(gulp.dest(app.distPath))
        .pipe(connect.reload()) //当内容发生改变时, 重新加载。
});
/*3.执行任务 通过命令行。gulp 任务名称*/
/*定义编译less任务  下载对应的插件 gulp-less
 * 把less文件转成css放到build
 * */
gulp.task('less',function () {
    gulp.src(app.srcPath+'style/index.less')
        .pipe(less())
        .pipe(gulp.dest(app.buildPath+'css/'))
        /*经过压缩,放到dist目录当中*/
        .pipe(cssmin())
        .pipe(gulp.dest(app.distPath+'css/'))
        .pipe(connect.reload())
});

/*合并js*/
gulp.task('js',function () {
    gulp.src(app.srcPath+'js/**/*.js')
        .pipe(concat('index.js'))
        .pipe(gulp.dest(app.buildPath+'js/'))
        .pipe(uglify())
        .pipe(gulp.dest(app.distPath+'js'))
        .pipe(connect.reload())
});

/*压缩图片*/
gulp.task('image',function () {
    gulp.src(app.srcPath+'images/**/*')
        .pipe(gulp.dest(app.buildPath+'images'))
        .pipe(imagemin())
        .pipe(gulp.dest(app.distPath+'images'))
        .pipe(connect.reload())
});

/*同时执行多个任务 [其它任务的名称]
 * 当前bulid时,会自动把数组当中的所有任务给执行了。
 * */
gulp.task('build',['less','html','js','image','lib']);


/*定义server任务
 * 搭建一个服务器。设置运行的构建目录
 * */
gulp.task('server',['build'],function () {
    /*设置服务器*/
    connect.server({
        root:[app.buildPath],//要运行哪个目录
        livereload:true,  //是否热更新。
        port:9999  //端口号
    })
    /*监听哪些任务*/
    gulp.watch('bower_components/**/*',['lib']);
    gulp.watch(app.srcPath+'**/*.html',['html']);
    gulp.watch(app.srcPath+'js/**/*.js',['js']);
    gulp.watch(app.srcPath+'images/**/*',['image']);
    gulp.watch(app.srcPath+'style/**/*.less',['less']);

    //通过浏览器把指定的地址 (http://localhost:9999)打开。
    open('http://localhost:9999');
});

/*定义默认任务
 * 直接执行gulp 会调用的任务
 * */
gulp.task('default',['server']);

其他打包工具:Gulp,Webpack(静态资源打包工具,全面,新)

其他工具:modernizr

https://www.npmjs.com/package/modernizr

介绍:Modernizr是一个开源的JS库,当你在网页中嵌入Modernizr的脚本时,它会检测当前浏览器是否支持CSS3的特性,比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等,同时也会检测是否支持HTML5的 特性——比如audio、video、本地储存、和新的 标签的类型和属性等。在获取到这些信息的基础上,你可以在那些支持这些功能的浏览器上使用它们,来决定是否创建一个基于JS的 fallback,或者对那些不支持的浏览器进行简单的优雅降级。另外,Modernizr还可以令IE支持对HTML5的元素应用CSS样式,这样开发者就可以立即使用这些更富有语义化的标签了。

https://www.jb51.net/article/65650.htm

Author:shuo
Link:http://yoursite.com/2019/10/25/20191025-响应式网站设计/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可