济南做网站哪家公司好,手工包网站建设策划书,无代码开发平台 开源,小吃加盟网站大全目录
1.rem布局
2.媒体查询
什么是媒体查询
语法规范
mediatype查询类型
关键字
媒体特性
3.Less基础
维护css的弊端
less介绍
less变量
less嵌套
less运算
4.rem适配方案
rem实际开发适配方案1
设计稿常见尺寸宽度
动态设置html标签font-size大小
元素大小取…目录
1.rem布局
2.媒体查询
什么是媒体查询
语法规范
mediatype查询类型
关键字
媒体特性
3.Less基础
维护css的弊端
less介绍
less变量
less嵌套
less运算
4.rem适配方案
rem实际开发适配方案1
设计稿常见尺寸宽度
动态设置html标签font-size大小
元素大小取值方法
苏宁易购网页制作
第一种不加js
第二种加js
rem实际开发适配方案2
5.响应式布局
响应式布局开发原理
编辑
响应式布局容器
Bookstrap前端开发构架
Bookstrap简介
Bookstrap使用
创建文件夹
创建html骨架结构
引入相关样式文件
书写内容
Bookstrap布局容器
编辑
Bookstrap栅格系统
编辑
栅格选项参数
编辑
编辑
列嵌套
列偏移
列排序
Bookstrap响应式工具
案例 1.rem布局
rem也是一个相对单位是相对于html元素的字体大小可以在最开始设置html的字体大小后面的宽和高都可以用rem来表示
em相对于父级元素字体大小 2.媒体查询
什么是媒体查询
媒体查询是CSS3新语法可以针对不同的媒体类型定义不同的样式
在重置浏览器大小的过程中页面也会根据浏览器的宽度和高度重新渲染页面 语法规范
media mediatype and/not/only (media feature){ CSS-code;
} mediatype查询类型
all用于所有设备 print用于打印机和打印预览
screen用于电脑屏幕、平板电脑、智能手机等 关键字
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
and可以将多个媒体特性连接到一起相当于“且”的意思
not排除某个媒体类型相当于“非”的意思可以省略
only指定某个特定的媒体类型可以省略 媒体特性
每种媒体类型都具体有各自不同的特性根据不同媒体类型的媒体特性设置不同的展示风格
都要加小括号
width 定义输出设备中页面可见域的宽度
min-width 定义输出设备中页面最小可见区域宽度
max-width 定义输出设备中页面最大可见区域宽度 媒体查询一般按照从小到大或者从大到小的顺序来写
将页面设置在一个范围内时需要用and来连接最小值和最大值
在本题中也可以省去969px这一项只写最小值540px和最小值970px后面出现的没有截运用的是css的层叠性 随着浏览器页面的拉缩文字背景和文字本身都发生改变 3.Less基础
维护css的弊端 less介绍 less变量
变量是指没有固定的值可以改变的
变量名值
变量名规范必须以为前缀 不能包含特殊字符 不能以数字开头 大小写敏感
在样式最上方定义一个变量后后面再写到该变量的设置可以直接引用变量名 less嵌套
在less文件中直接将子元素写在父元素内在保存时css文件可将其转换为正常格式简化代码格式
header{ .logo{ width:300px; }
} 遇见交集/伪类/伪元素选择器需要在它们前面添加上符号如果没有这个符号那么就会被解析为子元素 less运算
在less文件中可以直接进行运算保存后css文件中可得出结果 注意乘号和除号的写法运算符中间左右都有一个空格隔开对于两个不同单位的值之间的运算运算结果的值取第一个值的单位如果两个值之间只有一个值有单位则运算结果就取该单位
在下下图中在代码中直接进行运算并且颜色也可进行加减渲染还利用了运算律 4.rem适配方案 rem实际开发适配方案1
设计稿常见尺寸宽度 动态设置html标签font-size大小
在不同的屏幕下可以发现元素盒子的宽和高都还是呈比例缩放的 元素大小取值方法
html font-size字体大小屏幕宽度/划分的份数
页面元素的rem值 页面元素值px/html font-size字体大小 苏宁易购网页制作
第一种不加js
新建common.less文件设置好最常见的屏幕尺寸利用媒体查询设置不同的html字体大小划分的份数定为15份默认html字体大小为50px,这句话写到最上面 页面引入可以将一个less文件引入到另一个less文件在html文件中就可以只引入一个less文件简化代码
import less文件名
impor是将一个样式文件导入到另一个样式文件中而link是将样式文件引入到html页面中 body样式宽度写的是15rem,没有写具体值 第二种加js rem实际开发适配方案2 5.响应式布局
响应式布局开发原理
使用媒体查询针对不同宽度的设备进行布局和样式的设置从而适配不同设备。 响应式布局容器
响应式需要一个父级作为布局容器来配合子级元素实现变化效果
原理在不同的屏幕下通过媒体查询来改变这个布局容器的大小再改变里面子元素的排列方式和大小从而实现不同屏幕下看到不同的页面布局和样式变化 父盒子都定义为container Bookstrap前端开发构架
Bookstrap简介 Bookstrap使用
创建文件夹 创建html骨架结构 引入相关样式文件 书写内容 直接拿Bookstrap预定好的样式放到自己的代码中还可以进行修改修改不成功时要注意权重问题 Bookstrap布局容器
定义一个container类后不需要再使用媒体查询再定义bookstrap预先定义好了这个类一般用于响应式布局
container-fluid百分比布局占浏览器宽度的全部用于单独做移动端开发 Bookstrap栅格系统
栅格系统是将页面划分为等宽的列通过列数的定义来模块化页面布局
Bookstrap是将container划分成了12等份,container变大每一份就会变大反之会变小 栅格选项参数
栅格系统用于通过一系列的行row和列column的组合来创建页面布局需要将内容放入这些创建好的布局中
根据container的宽度来设置不同的类前缀
class.col-lg-2表示占两份
如果所有子项的份数加起来小于12那么container就会有空余如果所有子项的份数加起来大于12那么多余的子盒子就会被挤到下面一行
每一列都默认有左右15像素的padding 在类名的定义时可以添上在不同屏幕大小时每个子项所占的份数放在一起写在调用时要用相同类名调用的方法来写 列嵌套
栅格系统将内容再次嵌套时为了消除padding值的影响需要在添上一个row元素再将嵌套的小盒子放在新的row元素内这样就取消了父元素的padding值而且高度自动和父级一样高。 如果想要盒子中间由空隙是不能加margin值的加了之后会把盒子挤掉以为三个盒子时每个盒子的宽度是33.3333%有多少个盒子这多少个盒子就会把整个浏览器宽度平分可以再在每个盒子里面放一个小盒子来实现有空袭的效果。 列偏移
使用.col-md-offset-份数 类可以使盒子向右偏移会自动给偏移的盒子添加边距
想让两个盒子左右分开让第二个盒子向右偏移12减去两个盒子的宽度想让一个盒子水平居中让盒子向右偏移12减去该盒子的宽度再除以2 列排序
使用.col-md-push-份数 将左边的盒子推到右侧使用.col-md-pull-份数 将右边的盒子拉到左边 Bookstrap响应式工具
添加类名hidden-屏幕 可以实现再相应的屏幕大小下隐藏盒子添加visible-屏幕 可以实现仅在相应的屏幕大小下显示内容 案例
给盒子添加一个row的父盒子就能让子盒子顶着父盒子的边缘 去掉padding值需要考虑权重问题还要考虑将插入图片的宽度设置为和子盒子一样宽这样图片才能达到缩放的效果 盒子中间有间隔但是不能直接设置margin值会把盒子挤掉设置内边距padding-right值背景为白色是就能看到空白 为了显示出更好的效果让图片随浏览器的宽度改变而改变需要不强制设置图片的宽度在屏幕较小时将图片隐藏同时提前设置好另一种样式在屏幕较小时显示
