HTML5&CSS3_移动端day07


响应式网页

响应式网页就是对应设备宽度的变化,页面样式发生改变,使得页面更美观友好。

一般网页在设备上宽度是不留白的,沾满浏览器宽度或者手机宽度的,所以要根据宽度的改变适配,高可以上下滑,没有固定的大小,不用根据高来响应适配。

媒体查询

响应式网页开发,需要用到媒体查询来判断条件修改css,如当宽度大于或小于多大尺寸,进行css样式的改变。

307

注意min-height要从小到大写,max-height要从大到小写,原理就是css有层叠性,如果不按照顺序写,效果会被层叠失效。

308

媒体查询的完整写法

完整写法基本上不使用,因为都用不到,

309

关键词有and,only和not。

310

如这个,我们百分之九十九就是在屏幕上显示网页,其他媒体类型根本用不到。

媒体特征

width/height等于多少,才生效css,一般不使用,较多的是某个范围生效,而不是某个值。

max/min-height也不使用,因为用户通常是调节宽度,而且网页高度可以向下滑动,一般不需要响应式

311

link引入媒体查询生效的css

原先media(){}都是写在style标签内,其实也可以通过link引入css,media变成了link的一个属性值

312

313

响应式网页隐藏

一般一些电商网站,在用户拉小浏览器宽度时,会隐藏一些控件,这个效果,判断视口宽度然后css样式书写display:hidden即可。

全屏如下

314

但是缩小宽度后,会隐藏上面的一部分广告

315

bootstrap

中文官网www.bootcss.com

bootstrap是一个前端UI框架,可以让你快速实现响应式网页的开发,因为它内置了许多的css样式和html与js,你只需要去官网下载它的开发包,使用的页面引入bootstrap.min.css即可通过类名使用它的css。

316

317

1-用于生产环境的bootstrap就是开发者用的,里面的代码全部压缩了,可以运行的更快。我们如果只开发使用它的类名实现功能,就下载这个即可

2-源码就是bootstrap里面所有的css,js,html代码,如果我们要学习它的原理,就下载它。(bootstrap大部分代码由less写的)

3-sass和less基本上一致,是一种css预编译工具,方便写css代码。

bootstrap的使用

我们目前(2022年)基本上使用bootstrap3,不使用最新的bootstrap4

318

这里必须引入bootstrap.css或者bootstrap.min.css,它们两个效果内容一样,只是min是压缩版,很凌乱,我们看不明白,但是体积更小,引入它的话用户运行更快。

栅格系统

319

由上图可以看到,不同宽度,网页中的四个项目,有不同的排序,这就是栅格,可以通过bootstrap的类名实现。

bootstrap把网页分为12等份

320

关键数字768px,992px,1200px

xs特别额外的小(extrasmall),sm(small),md(middle),lg(large)

col-lg-3就表示一个div在大屏幕中按照一行四个排列,因为一共12份,每个占3份

321

一个标签可以写多个bootstrap提供的类名,对应不同的视口宽度,进行响应式网页开发。

为啥我4个div,我也没写浮动或者flex咋能随便几行排?

因为这里用了bootstrap框架的类名呀,框架类名里面就设置了对应的css实现效果,这里使用的原理是float浮动,目的是为了兼容更多版本,因为flex在一些低版本浏览器无法被渲染。

col-md-6

322

col-md-3

323

container-fluid与row类的使用

324

.container-fluid与我们平常写一个div不设置宽度一样是全宽显示,但是它有内边距

.row是左右-15的margin

.col是上下-15的margin

.col和.row类就是为了我们container版心不需要内边距时使用的,让container默认的15px的padding与row的-15px的margin相互抵消。

325

学习bootstrap的重点

注意:一定要引入bootstrap-3.4.1-dist/css/bootstrap.min.css,不要引入那个theme.min.css否则无效。

bootstrap的内容我们是记不完的,我们主要学习,如何查找使用与调用。

326

如找css样式,就打开bootstrap3中文文档,选中全局css样式即可

327

按钮

相应的类名必须给相应的标签使用才有效果

328

相应的类名必须给相应的标签使用才有效果,而且类名和标签一般前缀一致如:<table class="table table-striped table-bordered table-hover">,table标签里面的类名一般table开头

组件

329

图标

330

图标引入和iconfont一样的方法,先写一个glyph类, 后面再加上你想要的图标类。

331

JavaScript插件

要引入两个js文件,分别是jQuery.js和bootstrap.min.js,因为bootstrap.min.js要用到jQuery所以必须先引入jQuery。

332

注意:除了引入两个js,原先的bootsrap.min.css也要引入。

项目Alloyteam

333

步骤

注意:有时候我打开两个类似的项目,我自己跟着写,但是样式就是不生效,逻辑没有任何错误,后面关闭vscode,单独打开一个,就能生效,不知道是bug还是有冲突。

1-把轮播图先放上去(因为后续的header需要放到轮播图区域的里面)

1.1引入相应的css和js,再复制bootstrap里面的js轮播图代码,修改图片路径为自己想要的图片

1.2根据自己需要设置media媒体查询,其中图片宽高需要跟着父级走,一般默认base.css就设置了图片的宽为100%,所以我们还需要设置图片的高,然后根据不同屏幕宽度,设置图片父级的大小即可。

为什么调节图片大小要跟着父级走,然后调节父级大小?

因为父级内还有其他小标签,也是根据父级等比缩放的,如果media后只改变图片大小,这些小控件不变,就不能达到效果。

334

但是一系列权重问题会让我很难选中这个img,有什么简单方法呢?在它的样式后面加!important即可。

2-从bootstrap选一个头部导航栏,把代码复制过来,然后根据需求,增加或删除一些代码,从而达到我们想要的样式。

335

我们选用这一个组件,看似和我们需要的效果完全没有关系,其实只需要删除input搜索框和下拉框等等,然后自己修改相应图标样式即可。

2.1我们在f12控制台中选中不需要的控件,记住它的标签与类名,在编辑器中删除即可

2.2注意删除的时候,最好整个标签折叠删除,防止一些错误的产生。

336

2.3达到如上这个效果后,很明显header区域需要固定定位,而且需要去除背景色,再加上版心居中

这个固定定位我们可以自己书写,也可以用bootstrap为这个导航栏提供的类名;背景色我们需要f12从外到内一个一个检查这个颜色写在谁上面,然后自己书写less覆盖掉它;版心居中去除container-fluid中的fluid即可。

2.4在需要达到的样式中,是如下的在992px视口以下就折叠header,但是在我们bootstrap中是768px才折叠,怎么办呢?

这个时候需要用到bootstrap的定制功能

338

337

查看这个导航条的文档,可以看到改变视口的类名是什么,我们复制类名到定制页面ctrl+f搜索即可,然后将数据修改成为我们想要的,然后编程出一个新的bootstrap框架代码,重新引入到我们的项目中即可。

339

可以看到搜索后,这里的数据是sm,自然就是对应768px,我们改成md对应992px即可

问题

这里为什么不直接在我们的css代码中修改@grid-float-breakpoint?偏偏要去编译重新引入一个新框架,这么麻烦?因为这个@grid-float-breakpoint我们根本就搜不到,它里面有很多逻辑,不是我们修改一个东西就能完成的。

340

我们知道在col-xs-4等这些类名中,实际生效的宽度css,给的是每个div给25%的宽度,我们怎么实现每个div之间有间隙呢?给它们加margin吗?明显不行因为宽度会超出,就会自动换行。怎么办?

我们可以在div里面加内容,如上图中的a标签,a标签在div内自带了15px的padding,可以用这个来代替那部分间隙空白。

总结

bootstrap有很多功能,如清除浮动和响应式工具等等等等,我们重在实践,多去使用,不断去了解它们的使用方法,搞懂使用了解它的大部分功能后,再去研究它的源码,一般先引入它的样式,再根据自己的需求修改。

注意:

1-当前alloyteam项目基本上所有样式控件都是响应式,但这在内容较多的电商站如京东淘宝是做不到的,它们的响应式基本上就是视口最大宽度变小时,display:hidden一些不重要的内容。

2-适合全响应式的网页一般是一些内容极少简洁的个人站点,响应式的动画等可以让页面没有那么中空。

3-所以那种大的企业站,不同视口有两个不同网站,电脑端一个,手机端一个,如jd.com和m.jd.com


文章作者: 瑾年
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 瑾年 !
评论
  目录