CSS&HTML面经专题——移动端响应式布局 1、Viewport视口 在移动端viewport视口（pc端没有这个概念）就是浏览器显示页面内容的屏幕区域。 视觉视口不会影响布局视口的宽度和高度。 固定大小——跟屏幕大小相同，在上面。 layout viewport（布局视口）：布局视口定义了pc网页在移动端的默认布局行为。 也就是说，在不设置网页viewport的情况下，pc端的网页默认会以布局视口为基准，在移动端进行展示。 为了解决这个问题而衍生出来的概念就是响应式布局。它可以自动识别屏幕宽度、并做出相应调整。网页的排版布局和展示的内容会有所变动。 （2）概念 根据屏幕大小变化，页面的内容排版布局会自动调整变动，已呈现更好的用户体验。 5、rem,em,px的区别是什么？ px 绝对单位，页面按精确像素展示。
一、rem 1、意义：当px固定宽度不能适应不同屏幕尺寸时，布局需要，从而产生rem 2、rem 和 em 区别 2.1 rem: root，以根节点（html ）作为参照的尺寸 2.2 em: 根据父级font-size确定大小 1em = 1font-size（父级的 ） 3、随着屏幕宽度的变化，改变HTML根元素font-size ，从而控制rem值，从而达到相应效果（其他HTML子元素width等都是rem） function autoRem(){ var html = document.documentElement; 16 + 'px'; //16 是根据自己页面设定，非固定使用，以方便后续计算为准（iPhone5中320屏幕，刚好可以整除，一个屏幕刚好16rem） } //从此，假设iPhone5测试，则html 2、利用less计算能力，计算rem @r: 10rem; .main{ width: 400/@r; //400px---->40rem } 三、利用border-sizing布局
提供包括云服务器，云数据库在内的90+款云计算产品。打造一站式的云产品试用服务，助力开发者和企业零门槛上云。
HTML 布局 HTML布局四剑客-Flex,Grid,Table,Float - KeepLearning_! - 博客园 Float 浮动布局 Table 表格布局 Flex 弹性布局 Grid 网格布局 弹性布局 html5:div 横向排列的方法。_我的成长之路！ -CSDN博客_div横向排列 Flex 布局教程：语法篇 - 阮一峰的网络日志 Flex 布局教程：实例篇 - 阮一峰的网络日志 Flex 布局示例 网格布局 CSS Grid 网格布局教程 - 阮一峰的网络日志
作者：Tolonger 原文链接：https://www.jianshu.com/p/9e7e755ca281 除了百分比流式布局之外，rem布局占据了目前移动端布局的热潮。 那么究竟这几种布局差别在哪里，对应的有什么效果，希望本文能给你一些有益的启示。除此之外还有响应式布局，固定宽度布局等。 百分比流式布局 这里面最知名的当属bootstrap框架的思路，他所有的组件以及模板ui均是百分比流式布局，单位为px.并且我们看到的大部分对移动端适配的页面也均是采用这种核心思想去做的，方法简单，多端共用 淘宝触屏版布局的前提就是viewport的scale根据devicePixelRatio动态设置。js中可以通过devicePixelRatio拿到具体的设备数值。 1. 响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位
什么是Flex布局 flex布局表示弹性布局，为盒状模型提供最大的灵活性。 align-self: auto | flex-start | flex-end | center | baseline | stretch; 移动端适配 01. <link href="css/bootstrap.min.css" rel="stylesheet"> 布局容器 ? > 字体图标 栅格系统: 栅格系统，在各个档位下，控制子元素布局不同 -- 各个档位下，按照各个档位下布局 --> <div class="col-md-6 col-lg-434550移动端布局笔记移动端布局笔记 概念 英寸 设备的物理尺寸的单位，即屏幕对角线的长度，1英寸 = 2.54 厘米。 分辨率 屏幕分辨率/Resolution 屏幕由多少个像素组成。 布局视口： 手机上为了容纳为桌面浏览器设计的网站，默认布局视口宽度远大于屏幕宽度，为了让用户看到网站全貌，它会缩小网站。 视觉视口： 屏幕的可视区域，即物理像素尺寸。 name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 指定了布局视口 所以添上width=device-width的viewport meta后页面变大了（一开始页面内容小得看不清），实际上是布局视口变小了。7520.移动端常见布局6.1流式布局（百分比布局） 流式布局就是百分比布局，也称非固定像素布局。 通过盒子宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素限制，内容向两侧填充。 流式布局方式是移动web开发使用的比较常见的布局方式 max-width 最大宽度（max-height 最大高度） min-width 最小宽度（min-hight 最小高度） 6.2 flex布局 6.2.1传统布局与flex布局 传统布局 兼容性好 布局繁琐 局限性，不能在移动端很好的布局 flex弹性布局 操作方便布局极为简单，移动端应用广泛 PC端浏览器支持情况较差 当我们把父盒子设为flex布局后，子元素的float、clear和vertical-align属性都将失效 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 采用flex布局的元素，称为 它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”。16631HTML&CSS07_浮动和定位布局起初，我认真的时候，你不认真，现在你认真了，我却已离你有些远了。想想当时我们一起学习一起努力的日子，是不是有种莫名的喜悦。现在大家工作了，也会遇到一些前端设计的...52880移动web开发之flex布局（弹性布局）1 flex布局 1.1传统布局与flex布局 传统布局 兼容性好 布局繁琐 局限性，不能在移动端很好的布局 flex弹性布局 操作方便布局极为简单，移动端应用广泛 PC端浏览器支持情况较差 IE11或更低版本不支持或仅部分支持 1.2布局原理 flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 当我们把父盒子设为flex布局后（display: flex;），子元素的float、clear和vertical-align属性都将失效 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 采用flex布局的元素，称为flex容器（flex container），简称“容器”。 它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”。17930HTML&CSS07_浮动和定位布局起初，我认真的时候，你不认真，现在你认真了，我却已离你有些远了。想想当时我们一起学习一起努力的日子，是不是有种莫名的喜悦。现在大家工作了，也会遇到一些前端设计的...41190HTML 文件在PC&移动端完美自适应布局的技巧一、实现思路 参考比较常见的响应式布局，在PC端使用左图布局，移动端右图。转换时将图片的宽度由定宽改为铺满，使标题等文字换行展示。 ? 1 邮箱渲染html的兼容性问题很多，在桌面和移动端渲染电子邮件大约有上百万种不同的组合方式，所以我们要找出一个最小子集来书写html和样式。 4 移动端web的常规优化对邮件html同样适用，比如使用更小的字体、图片格式选型和压缩、高精度图片适配retina屏、用css绘制小图标代替图片等等。 二、基本原则 1 由于 OutLook从2003版本为了安全开始便使用 Word HTML 引擎进行渲染，所以我们只能使用table布局，标签也只能使用table / tr / td / span / 3 style标签的支持程度非常碎片化，media query的支持更加有限，所以要用属性和style行内样式来保底布局。 4 邮件html里没有任何脚本。1.3K60【布局】HTML&CSS06_默认布局级别不会代码的设计不是好程序员，在这里我为同学们准备了有关HTML&CSS的一系列教学视频。23820移动设备HTML5页面布局 HTML5布局学习 勤学苦练 与下面的代码是一致的： HTML5布局学习 7.hgroup <hgroup>定义为对网页或区段的标题元素进行组合83380第130天：移动端-rem布局一、关于布局方案 当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单，关键在于对不同设备的适配。 之前介绍了一篇关于移动端rem布局方案，这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用。 网易云的方案总结为：根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等，动态调节html的font-size大小。 纵向的单位可以全部使用px，横向的使用rem，因为移动设备宽度有限，而高度可以无限向下滑动。 比如上图有三种登陆方式，在使用vue布局时，有两种方案。一是只建立一个表单用于数据绑定，点击按钮触发判断；而是有几种登陆方式建立几个表单，用一个字段标识当前显示的表单。94440移动web开发之rem布局不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体大小就是 24px */ div { font-size: 2rem; } rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。13851移动开发之响应布局移动开发之响应布局 1.响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 1.优点 标准化的html+css编码规范 提供了一套简洁、直观、强悍的组件 有自己的生态圈，不断地更新迭代 让开发更简单，提高了开发的效率 2.2Bootstrap 使用 在现阶段我们还没有接触 Bootstrap使用四部曲： 创建文件夹结构 创建html骨架结构 引入相关样式文件 书写内容 2.3 布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container =1200px）：宽度设置为1170px 2.container-fluid类 流式布局容器 百分百宽度 占据全部视口(ciewport)的容器 适合于单独做移动开发 3.Bootstrap Bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多十二列 Bootstrap里面container宽度是固定的，但是不同屏幕下15720HTML之弹性布局相信大家在做html页面布局的时候都有过一个很脑袋疼的问题，那就是尺寸不平均，尺寸不平均会导致页面的不整齐，今天给大家分析下弹性布局。 弹性布局html布局中是很广泛的一个属性，他可以让你整个页面的布局合理化的分布在平均的位置上，重要的是他可以根据的你的分辨率来改变宽度。这样就不会因为不知道怎么让布局整齐而抓破头了。 html+css代码: <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .big-box div class="box-1"> </body> </html9630京东移动端页面布局（一）下面来逐步看看京东移动端页面是怎么编写构成的。 首先来看看京东的移动端页面，如下： ? 只要搜索京东，然后F12设置移动端浏览器显示，刷新一下浏览器就可以看到这个移动端的呈现方式的了。 本篇章不写太多，先来完成整体页面上中下三大部分的布局设置。 ? 注意：微信展示问题 如果将这三个部分直接在body里面编写固定定位，这样下面的那部分会在微信出现无法点击的情况。 创建三大部分的布局的git分支 init-layout 首先在我的码云仓库中创建分支，如下： ? 然后在本地仓库更新一下，并切换分支进行开发。 ? 好了，下面就来开始编写三大部分的代码吧。 编写基本HTML结构 ? 编写好了基本html架构之后，然后到index.css中编写样式。 编写最外部div固定定位的样式。 ? overflow-y: auto; overflow-x: hidden; 好啦，这样移动端三大部分的布局就完成了。先提交代码，下一个篇章继续。1.8K40移动web开发之流式布局流式布局（百分比布局） 流式布局就是百分比布局，也称非固定像素布局。 通过盒子宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素限制，内容向两侧填充。 流式布局方式是移动web开发使用的比较常见的布局方式 max-width 最大宽度（max-height 最大高度） min-width 最小宽度（min-hight 最小高度） 京东首页案例 /images/jd-sprites.png) no-repeat -83px 0; background-size: 200px; } /* 主体内容 */ /* 滑动图 */ .main-content 33.33%; } .main-content .brand div img { width: 100%; } /* 导航模块 */ .main-content .nav a { /* 添加浮动就不需要转换行内块19150
移动端布局笔记 概念 英寸 设备的物理尺寸的单位，即屏幕对角线的长度，1英寸 = 2.54 厘米。 分辨率 屏幕分辨率/Resolution 屏幕由多少个像素组成。 布局视口： 手机上为了容纳为桌面浏览器设计的网站，默认布局视口宽度远大于屏幕宽度，为了让用户看到网站全貌，它会缩小网站。 视觉视口： 屏幕的可视区域，即物理像素尺寸。 name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 指定了布局视口 所以添上width=device-width的viewport meta后页面变大了（一开始页面内容小得看不清），实际上是布局视口变小了。
6.1流式布局（百分比布局） 流式布局就是百分比布局，也称非固定像素布局。 通过盒子宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素限制，内容向两侧填充。 流式布局方式是移动web开发使用的比较常见的布局方式 max-width 最大宽度（max-height 最大高度） min-width 最小宽度（min-hight 最小高度） 6.2 flex布局 6.2.1传统布局与flex布局 传统布局 兼容性好 布局繁琐 局限性，不能在移动端很好的布局 flex弹性布局 操作方便布局极为简单，移动端应用广泛 PC端浏览器支持情况较差 当我们把父盒子设为flex布局后，子元素的float、clear和vertical-align属性都将失效 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 采用flex布局的元素，称为 它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”。
起初，我认真的时候，你不认真，现在你认真了，我却已离你有些远了。想想当时我们一起学习一起努力的日子，是不是有种莫名的喜悦。现在大家工作了，也会遇到一些前端设计的...
1 flex布局 1.1传统布局与flex布局 传统布局 兼容性好 布局繁琐 局限性，不能在移动端很好的布局 flex弹性布局 操作方便布局极为简单，移动端应用广泛 PC端浏览器支持情况较差 IE11或更低版本不支持或仅部分支持 1.2布局原理 flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 当我们把父盒子设为flex布局后（display: flex;），子元素的float、clear和vertical-align属性都将失效 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 采用flex布局的元素，称为flex容器（flex container），简称“容器”。 它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”。
一、实现思路 参考比较常见的响应式布局，在PC端使用左图布局，移动端右图。转换时将图片的宽度由定宽改为铺满，使标题等文字换行展示。 ? 1 邮箱渲染html的兼容性问题很多，在桌面和移动端渲染电子邮件大约有上百万种不同的组合方式，所以我们要找出一个最小子集来书写html和样式。 4 移动端web的常规优化对邮件html同样适用，比如使用更小的字体、图片格式选型和压缩、高精度图片适配retina屏、用css绘制小图标代替图片等等。 二、基本原则 1 由于 OutLook从2003版本为了安全开始便使用 Word HTML 引擎进行渲染，所以我们只能使用table布局，标签也只能使用table / tr / td / span / 3 style标签的支持程度非常碎片化，media query的支持更加有限，所以要用属性和style行内样式来保底布局。 4 邮件html里没有任何脚本。
不会代码的设计不是好程序员，在这里我为同学们准备了有关HTML&CSS的一系列教学视频。
HTML5布局学习 勤学苦练 与下面的代码是一致的： HTML5布局学习 7.hgroup <hgroup>定义为对网页或区段的标题元素进行组合83380第130天：移动端-rem布局一、关于布局方案 当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单，关键在于对不同设备的适配。 之前介绍了一篇关于移动端rem布局方案，这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用。 网易云的方案总结为：根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等，动态调节html的font-size大小。 纵向的单位可以全部使用px，横向的使用rem，因为移动设备宽度有限，而高度可以无限向下滑动。 比如上图有三种登陆方式，在使用vue布局时，有两种方案。一是只建立一个表单用于数据绑定，点击按钮触发判断；而是有几种登陆方式建立几个表单，用一个字段标识当前显示的表单。94440移动web开发之rem布局不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体大小就是 24px */ div { font-size: 2rem; } rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。13851移动开发之响应布局移动开发之响应布局 1.响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 1.优点 标准化的html+css编码规范 提供了一套简洁、直观、强悍的组件 有自己的生态圈，不断地更新迭代 让开发更简单，提高了开发的效率 2.2Bootstrap 使用 在现阶段我们还没有接触 Bootstrap使用四部曲： 创建文件夹结构 创建html骨架结构 引入相关样式文件 书写内容 2.3 布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container =1200px）：宽度设置为1170px 2.container-fluid类 流式布局容器 百分百宽度 占据全部视口(ciewport)的容器 适合于单独做移动开发 3.Bootstrap Bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多十二列 Bootstrap里面container宽度是固定的，但是不同屏幕下15720HTML之弹性布局相信大家在做html页面布局的时候都有过一个很脑袋疼的问题，那就是尺寸不平均，尺寸不平均会导致页面的不整齐，今天给大家分析下弹性布局。 弹性布局html布局中是很广泛的一个属性，他可以让你整个页面的布局合理化的分布在平均的位置上，重要的是他可以根据的你的分辨率来改变宽度。这样就不会因为不知道怎么让布局整齐而抓破头了。 html+css代码: <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .big-box div class="box-1">
勤学苦练
一、关于布局方案 当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单，关键在于对不同设备的适配。 之前介绍了一篇关于移动端rem布局方案，这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用。 网易云的方案总结为：根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等，动态调节html的font-size大小。 纵向的单位可以全部使用px，横向的使用rem，因为移动设备宽度有限，而高度可以无限向下滑动。 比如上图有三种登陆方式，在使用vue布局时，有两种方案。一是只建立一个表单用于数据绑定，点击按钮触发判断；而是有几种登陆方式建立几个表单，用一个字段标识当前显示的表单。
不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体大小就是 24px */ div { font-size: 2rem; } rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。
移动开发之响应布局 1.响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 1.优点 标准化的html+css编码规范 提供了一套简洁、直观、强悍的组件 有自己的生态圈，不断地更新迭代 让开发更简单，提高了开发的效率 2.2Bootstrap 使用 在现阶段我们还没有接触 Bootstrap使用四部曲： 创建文件夹结构 创建html骨架结构 引入相关样式文件 书写内容 2.3 布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container =1200px）：宽度设置为1170px 2.container-fluid类 流式布局容器 百分百宽度 占据全部视口(ciewport)的容器 适合于单独做移动开发 3.Bootstrap Bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多十二列 Bootstrap里面container宽度是固定的，但是不同屏幕下
相信大家在做html页面布局的时候都有过一个很脑袋疼的问题，那就是尺寸不平均，尺寸不平均会导致页面的不整齐，今天给大家分析下弹性布局。 弹性布局html布局中是很广泛的一个属性，他可以让你整个页面的布局合理化的分布在平均的位置上，重要的是他可以根据的你的分辨率来改变宽度。这样就不会因为不知道怎么让布局整齐而抓破头了。 html+css代码: <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .big-box div class="box-1">
下面来逐步看看京东移动端页面是怎么编写构成的。 首先来看看京东的移动端页面，如下： ? 只要搜索京东，然后F12设置移动端浏览器显示，刷新一下浏览器就可以看到这个移动端的呈现方式的了。 本篇章不写太多，先来完成整体页面上中下三大部分的布局设置。 ? 注意：微信展示问题 如果将这三个部分直接在body里面编写固定定位，这样下面的那部分会在微信出现无法点击的情况。 创建三大部分的布局的git分支 init-layout 首先在我的码云仓库中创建分支，如下： ? 然后在本地仓库更新一下，并切换分支进行开发。 ? 好了，下面就来开始编写三大部分的代码吧。 编写基本HTML结构 ? 编写好了基本html架构之后，然后到index.css中编写样式。 编写最外部div固定定位的样式。 ? overflow-y: auto; overflow-x: hidden; 好啦，这样移动端三大部分的布局就完成了。先提交代码，下一个篇章继续。
流式布局（百分比布局） 流式布局就是百分比布局，也称非固定像素布局。 通过盒子宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素限制，内容向两侧填充。 流式布局方式是移动web开发使用的比较常见的布局方式 max-width 最大宽度（max-height 最大高度） min-width 最小宽度（min-hight 最小高度） 京东首页案例 /images/jd-sprites.png) no-repeat -83px 0; background-size: 200px; } /* 主体内容 */ /* 滑动图 */ .main-content 33.33%; } .main-content .brand div img { width: 100%; } /* 导航模块 */ .main-content .nav a { /* 添加浮动就不需要转换行内块
物联卡是基于运营商提供物联网专用号段的物联网通信业务，该业务支持短信、无线数据通信等基础通信服务。可用于各种物联网设备的应用场景，如车联网、智能家居、穿戴设备、共享单车、移动支付、环境监测和智慧农业等。
扫码关注云+社区
领取腾讯云代金券
云服务器
测试服务 WeTest
文件存储
SSL 证书
WordPress