我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

康利-20221027-web移动端响应式开发

[复制链接]
智商不在服务区 发表于 2022-10-27 22:09:55 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
一、学习内容:
1.响应式开发
就是使用媒体查询针对不同的宽度的设备进行布局和样式的设置,从而适配不同的设备
设备划分情况:
小于768px的为超小屏幕(手机)
768px-992px之间为小屏幕设备(平板)
992px-1200px之间的为中等屏幕(桌面显示器)
大于1200px就是超大屏幕(大桌面显示器)
2.BootStrap前端框架
标准化的html+css编码规范
提供了一套简洁、直观、强大的组件
有自己的生态圈,会不断的更新迭代
让开发会更简单,提升我们的开发效率

在现在阶段我们还没有接触js的相关内容,所以只考虑使用它的样式库
3.BootStrap的栅格系统
它为页面内容和栅格系统包裹了一个.container容器或者.container-fluid容器
BootStrap的栅格系统的使用
随着屏幕或者视口尺寸的增加,系统会自动分配最多12列的栅格
栅格系统通过一系列的行(row)和列(column)的组合来创建页面布局,我们就可以写在这些创建好的布局中
按照不同的屏幕划分为1~12等份,如果想去掉padding,可以给父容器加row即可
xs-extra-small超小;sm-small小;md-media中等;lg-large大;
BootStrap的栅格系统参数

栅格系统的列嵌套,每一个盒子都可以作为一个新的行进行处理,进行列嵌套操作(套娃)
栅格系统的列偏移col-lg-offset-n代表在大屏幕下将盒子向右移动n列,在其他的盒子下进行偏移,值需要更改col-lg-offset-n中的lg即可(xs、sm、md、lg)
栅格系统的列排序:通过使用.col-lg-push-n(将盒子向右推n列)和.col-lg-pull-n(将盒子向右拉n列)
4.网页编码总结
PC端
先写结构再写样式
结构永远比样式重要
H5C3在使用时有部分浏览器会有兼容性问题
移动端:
移动端主流方案:单独制作移动端页面
移动端备选方案:响应式页面兼容移动端
移动端的技术类型:流式布局、flex弹性布局(推荐)、rem布局(推荐)、响应式布局

回复

使用道具 举报

关注0

粉丝0

帖子68

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026