python四大软件-传智播客解析Python之移动端页面适配四大方式
前端在制作移动端页面时,会碰到适配各种手机屏幕的问题,而且还包括平板电脑,这么多种分辨率的屏幕,如何做到适配呢?传智播客为此总结了四种方式，具体如下：
传智播客解析Python之移动端页面适配四大方式：
一、流体布局
所谓的流体布局，就是用百分比来定义宽度，最外层容器的宽度设置为100%，就可以适配不同的屏幕，子元素按照比例来设置百分比，子元素整体的百分比之和就是100%，但是如果有子元素设置了边框，或者padding，那么整体的宽度就会大于100%，这时，我们可以将盒子的尺寸计算方式设置为从边框计算，通过设置：box-sizing:border-box，此时，盒子设置的宽度就是盒子的实际宽度，就没有这个问题了。
宽度解决了，高度如何设置呢？一般的元素，高度可以固定不变，所以在屏幕变化时，我们可以看到元素的宽度变了，高度不变，但是对于图片，如果高度不同，图片就会被拉扁，此时我们可以将图片的宽度设为100%；它的宽度就由它的父级的宽度决定，图片的高度不设置，图片就会按照宽度变化等比例放大或缩小，这是图片的特性，这样就可以做到图片的适配了。
流体布局的伪代码如下：
二、响应式布局
响应式布局，就是使用媒体查询的方式，针对不同的屏幕，对应不同的样式，但是移动端的屏幕很多种，如果要对应这么多套不同的样式，这样做也不现实，所以针对移动端，可以划分出三个屏幕宽度范围，在范围之内的，就使用同一套样式，这样定义三套样式就可以了，宽度的区间可以参照苹果手机的分辨率：374px以下为第一个区间，375px到413px为第二个区间，414px以上为第三个区间，按照这个三个区间定义三套样式，在苹果手机上可以做到很好的适配，但对于一些其他分辨率的手机，可能会有一些不太适配的细节，但是这三套，应该基本上是适用了。
响应式布局的伪代码如下：-
三、弹性盒子布局模型
弹性盒子布局模型是一个新增的CSS 布局模块，它带有流体布局和响应式布局的一些特性，而且它用少量的属性可以实现了多个元素的对齐方式，分布以及顺序等问题，用它能快捷高效的实现适配多终端的布局，这种模块简称为 flexbox，flexbox布局模块的先后有三个版本，前两个版本的一些属性在最新的浏览器上已经得不到支持了，第三个版本在最新的浏览器上已得到广泛的支持。
Flexbox布局模块是CSS3新增的一些属性，这些属性分为容器属性和条目属性，容器和条目是这种模块里面的概念，指的其实就是父元素和子元素。父元素通过设置display:flex来声明flexbox模块、通过flex-flow来设置子元素排列方式、通过justify-content来设置元素的分布方式等等。而子元素通过flex属性来设置伸长或缩小比例、通过order来设置它在容器中的顺序等等。
四、基于rem的布局
rem是CSS3新增的一个单位，相对于em单位，rem的单位设置更加简单，它是相对于根元素的的字体大小，其他的元素如果用rem来设置单位，它们对应的基准就是一样的，这样，在移动端适配中，除了html元素，其他元素的宽、高、行高、背景定位等等都用rem来设置，我们设定一个宽度作为基准，比如320px，然后按照这个基准，按比例来调节不同屏幕上对应的html元素的字体大小，就可以同步改变其他所有元素的用rem设置的尺寸的大小，这样就可以做到真正的按比例适配，不像流体布局，只能改变宽度，这种方式直接，高效，目前广泛应用在移动端布局中。
动态改变html标签文字大小的JavaScript如下：
CSS样式设置伪代码如下：
以上就是传智播客总结的四种移动端适配方式，您可以根据项目的需要，选择适合的适配方式，或者是组合使用一两种方式在项目中，希望这篇文章对您在移动端布局中有所帮助。
python四大软件-传智播客解析Python之移动端页面适配四大方式相关推荐
- 传智高校平台python答案_传智播客高校教辅平台学生端下载-传智播客高校教辅平台app学生版v4.13.0官网最新版_新绿资源网...
传智播客高校教辅平台app学生版是传智播客高校平台app应用,为全国高校用户提供技能培训.计算机编程教育.大数据教育.人工智能教育等课程,紧跟当下科技热点,让学员提升个人技能水平,学到真才实学! 传智 ...
- python需要多久-在传智播客培训python需要多久？
如今,python可以说是比较火的语言之一了,因为灵活以及在人工智能领域上的优势,不少人都转行去培训机构培训python,传智播客的官网上就每天有不少人都在咨询关于python的费用以及时长,今天传智 ...
- 传智播客学python可以找人工智能方向的工作吗_Python的就业方向
本帖最后由 人工智能 于 2018-8-16 15:51 编辑 为了Python的自学党们,黑马真的是拼了 !我们不仅有"人工智能+Python学习路线图",还根据以往的经验,总结 ...
- 【转载】2018传智播客黑马python人工智能15期视频教程
下载地址:百度网盘下载 ├─01 网络编程 │ ├─01-基本概念 │ │ 01-网络通信概述.flv │ │ 02-IP地址.flv │ │ 03-Linux. ...
- 传智python15期_【转载】2018传智播客黑马python人工智能15期视频教程
├─01 网络编程 │ ├─01-基本概念 │ │ 01-网络通信概述.flv │ │ 02-IP地址.flv │ │ 03-Linux.windows查看网卡信 ...
- 传智播客python笔记_python传智播客笔记--第十天：隐藏属性，私有属性，私有方法，__del__方法，类的继承，类中方法的重写...
封装,继承,多态 隐藏属性,私有属性,私有方法,__del__方法,类的继承,类中方法的重写 -**************************************************** ...
- 2018传智播客黑马python视频教程15期
下载地址 http://www.jszlm.cn/thread-3699-1-1.html
- 与众不同 独树一帜，传智播客2018春季课程发布会在京举行
2018年4月19日,"传智播客2018春季课程发布会"在北京77文创园召开,传智播客副总裁毕向东.教学研发总监朱景尧.研究院院长于洋.Python课程研发总监邢文鹏.博学谷运营总 ...
- 武汉校区南非“留学生”：来传智播客学习是“独特的机会”
随着社会的飞速发展.进步,国家对于"高精尖"IT技术开发人才的需求也愈加旺盛. 肩负"为莘莘学子改变命运而讲课,为万千学生少走弯路而著书"使命的传智播客,在IT ...
最新文章
- SQL2000联机丛书：使用和维护数据仓库
- js 生成二维码_QRcode.js 生成二维码
- C#获取动态代码的值
- ITK:将itk :: Image转换为vtkImageData
- Android常用开源框架
- 天弘余额宝4月10日起全面解除限购，你还会选择天弘余额宝吗？
- Go-json 实例
- 【R】语言第五课----画图
- 嵌入式编程(一)：51单片机如何将函数 定义到指定程序地址
- 【LOJ119】单源最短路 模板
- Ubuntu 14.04 安装Octave
- [转]SQL Server 2000执行计划成本(2/5)
- 数学模型：优化模型（一）存贮问题
- otsu阈值分割算法原理_otsu(大津法阈值分割原理)
- 字符常量和字符串常量
- PCB设计的工艺流程
- 记录使用浏览器扫码功能（pad 笔记本 手机）
- ExpandableListView 实现三级菜单中grou_item与child_item点击无响应
- 图像同时对比度、空间分辨率、幅度分辨率的实现
- 你一事无成，还在那里傻乐