文章目录
1. 流式布局
1.1 什么是流式布局
-
流式布局,就是百分比布局,也称非固定像素布局。
-
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
-
百分比是相对于父盒子来设置的,比如父盒子宽度
1000px
,子盒子设置80%就是800px
-
流式布局方式是移动web开发使用的比较常见的布局方式。
1.2 meta视口标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
注意:在移动浏览器中当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备那么大展示
属性 | 解释说明 |
---|---|
width | 宽度设置的是viewport ,可以设置device-width特殊值 |
initial-scale | 初始缩放比,大于0的数字 |
maximum-scale | 最小缩放比,大于0的数字 |
minimum-scale | 最大缩放比,大于0的数字 |
user-scalable | 用户是否可以缩放,yes或no( 1或0 ) |
1.3 移动开发选择和技术解决方案
1.3.1 移动端主流方案
- 单独制作移动端页面
- 通常情况下网站域名前面加 m
- 也就是说pc端和和移动端为两套网站,大多数网站都是这样做的
- 响应式页面
- 即pc和移动端共用一套网站,只不过在不同屏幕下,样式会自动适配,三星就是这样做的
1.3.2 移动端技术解决方案
-
移动端浏览器兼容问题
-
移动端浏览器基本以 webkit 内核为主,因此我们就只用考虑 webkit 兼容性问题。
-
我们可以放心使用
H5
标签和CSS3
样式。 -
同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可
-
-
移动端公共样式
-
移动端 CSS 初始化推荐使用
normalize.css
-
Normalize.css
:保护了有价值的默认值 -
Normalize.css
:修复了浏览器的bug -
Normalize.css
:是模块化的 -
Normalize.css
:拥有详细的文档
-
1.3.3 移动端特殊样式
/* CSS3盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
/* 点击高亮我们需要清除 设置为transparent 完成透明 */
-webkit-tap-highlight-color: transparent;
/* 在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式 */
-webkit-appearance: none;
/* 禁用长按页面时的弹出菜单 */
img,a {
-webkit-touch-callout: none;
}
2. flex 弹性布局
2.1 特征
- 默认单行显示
- 父元素长度不够时会压缩子元素
- 当不给子元素设置宽高时,子元素会撑满父元素
2.2 父元素属性
2.2.1 display
- flex:改变元素的显示模式,变为弹性盒子
2.2.2 flex-direction
-
改变弹性盒子的主轴
-
row:水平摆放(默认)
-
column:垂直摆放
-
row-reverse:水平摆放,相反(123 变 321)
-
column-reverse:垂直摆放,相反
2.2.3 justify-content
- 子元素沿主轴的排列方式
- flex-start:沿主轴的起点开始摆放(默认,从左到右)
- flex-end:沿主轴的结束点开始摆放(不会改变子元素摆放顺序,和row-reverse不一样)
- center:水平居中
- space-evenly:平分剩余空间
- space-between:两端贴边,平分剩余空间
- space-around:每个子元素左右两边间距平分(中间多两边少)
2.2.4 flex-wrap
- nowrap:子元素不换行(默认,会压缩子元素)
- wrap:设置子元素换行展示
2.2.5 align-items
- 单行子元素沿侧轴的排列方式
- flex-start:沿侧轴的起点开始摆放(默认,从上到下)
- flex-end:沿侧轴的结束点开始摆放
- center:垂直居中
2.2.6 align-content
- 多行子元素沿侧轴的排列方式
- stretch:第一行起点摆放,剩余行平分剩余空间(默认)
- flex-start:沿侧轴的起点开始摆放(默认,从上到下)
- flex-end:沿侧轴的结束点开始摆放
- space-between:两端贴边,平分剩余空间
- space-around:每个子元素左右两边间距平分(中间多两边少)
2.2.7 flex-flow
- flex-direction和flex-wrap复合属性
- flex-flow: row wrap;
2.3 子元素属性
2.3.1 flex
- flex是下面这三个属性的简写
- flex -grow:默认单写就是它(生长)
- flex-shrink:仅在默认宽度之和大于容器的时候才会发生(收缩)
- flex-basis:需要带单位固定值
- 常用的是单值语法,单写一个无单位数,表示当前子元素占父元素的总份数
- 单值语法、双值语法、三值语法
- 具体了解可以查看
MDN
2.3.2 align-self
- 控制当前元素侧轴的排列
- stretch:默认
- center:居中
- flex-start:顶部
- flex-end:底部
2.3.3 order
- 修改当前元素的排列顺序(0)
- 数字越小排列越前,可以为负数
3. rem布局
3.1 rem单位
rem是根据根标签(html
标签)的font-size来改变的,比如html
的font-size为16px
,那么1rem
就等于16px
3.2 媒体查询
3.2.1 语法规范
@media mediatype and|not|only (media feature){
css-code;
}
@media screen and (min-width: 400px){
html {
font-size: 16px;
}
}
/* 也可以混合使用 */
@media (min-width: 400px) and (max-width: 500px){
html {
font-size: 16px;
}
}
- 用@media开头
- mediatype:媒体类型
- all:用于所有设备
- print:用于打印机和打印预览
- screen:用于电脑屏幕、平板电脑、智能手机等
- and、not、only:关键字
- and:可以将多个媒体特征连接到一起,相当于且的意思(一般只使用它)
- not:排除某个媒体类型,相当于非的意思 ,可以省略
- only:指定某个特征的媒体类型,可以省略
- media feature:媒体特征,必须有小括号包含
- width:到达一定的宽度时展示对应的样式
- min-width:到达一定的最小宽度时展示对应的样式
- max-width:到达一定的最大宽度时展示对应的样式
3.2.2 引入外部资源
<!-- 语法规范 -->
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="style.css">
<!-- 示例 -->
<link rel="stylesheet" media="screen and (min-width: 400px)" href="style.css">