在HTML5标准添加的新元素中，用于常见页面结 构的包括header footer footer nav aside aside article section hgroup 。... HTML5布局学习 勤学苦练 与下面的代码是一致的： HTML5布局学习... HTML5新元素 article 新元素
什么是响应式网页设计（布局） 响应式网页设计(Responsive Web design，通常缩写为RWD)是指：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整...可以说是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。...响应式布局的实现 1....这里有一个很严重的缺点 由于PC端和移动终端访问的是同一个网站，PC端可以不计较流量限制，但是移动端不可能不计较。...这样当我们在移动设备上访问响应式网页里的图片时，只是把图片的分辨率做了缩放，下载的还是PC端的那张大图，这样不仅浪费流量，而且浪费带宽，而且会拖慢网页的打开速度，严重影响用户的使用体验。
移动开发-百分比布局 流失布局案例: 京东商城: 点击查看 通过盒子宽度设置百分比来根据屏幕宽度来进行伸缩，不受固定像素限制，内容向两侧填充 流式布局，就是百分比布局，也称非固定像素布局 max-width...layout viewport: 视口是浏览器显示页面内容的屏幕区域, 视口可以分为布局视口、视觉视口和理想视口 视觉视口 visual viewport: 它是用户正在看到的网站的区域，可通过缩放去操作视觉视口...理想视口 ideal viewport: 理想视口，对设备来讲，是最理想的视口尺寸，需要手动添写meta视口标签通知浏览器操作 meta视口标签目的：布局视口的宽度应该与理想视口的宽度一致，就是设备有多宽...，布局视口就多宽 二倍图: 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比，1CSS像素=1物理像素 多倍图: 在标准viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题...: 单独制作移动端页面 (主流)，通过判断设备，如果是移动设备打开，则跳到移动端页面 响应式兼容移动端 (其次)，通过判断屏幕宽度来改变样式，以适应不同终端, 制作麻烦，需要花很大精力去调兼容性问题 移动端浏览器
移动开发-flex弹性布局 操作方便，布局极为简单，移动端应用很广泛 PC 端浏览器支持情况较差 IE 11或更低版本，不支持或仅部分支持 如果是PC端页面布局，我们还是传统布局 如果是移动端或者不考虑兼容性问题的...PC端页面布局，我们还是使用flex弹性布局 只需要给父元素添加 “display：flex” 即可 布局原理: flex 是 flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性...，任何一个容器都可以指定为 flex 布局 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。...伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。...flex-wrap属性定义，flex布局中默认是不换行的 属性值 说明 nowrap 默认值，不换行 wrap 换行 align-items 设置侧轴上的子元素排列方式（单行）: 该属性是控制子项在侧轴
什么是Flex布局 flex布局表示弹性布局，为盒状模型提供最大的灵活性。...align-self: auto | flex-start | flex-end | center | baseline | stretch; 移动端适配 01.... 布局容器 ?...> 字体图标 栅格系统: 栅格系统，在各个档位下，控制子元素布局不同...-- 各个档位下，按照各个档位下布局 --> <div class="col-md-6 col-lg-4
content="width=device-width"> Myself img:nth-child(2) { width: 50px; /*移动设备中的图片会被放大...流式布局 流式布局是一种等比例缩放布局方式，在 CSS 代码中使用百分比来设置宽度，也称百分比自适应的布局。 流式布局实现方法是将 CSS 固定像素宽度换算为百分比宽度。...> 效果图： PC端 移动端...initial-scale=1.0"> Myself a { -webkit-tap-highlight-color: transparent; /*移动端点击链接会高亮
6.1流式布局（百分比布局） 流式布局就是百分比布局，也称非固定像素布局。 通过盒子宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素限制，内容向两侧填充。...流式布局方式是移动web开发使用的比较常见的布局方式 max-width 最大宽度（max-height 最大高度） min-width 最小宽度（min-hight 最小高度） 6.2...flex布局 6.2.1传统布局与flex布局 传统布局 兼容性好 布局繁琐 局限性，不能在移动端很好的布局 flex弹性布局 操作方便布局极为简单，移动端应用广泛 PC端浏览器支持情况较差...IE11或更低版本不支持或仅部分支持 6.2.2布局原理 flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。...当我们把父盒子设为flex布局后，子元素的float、clear和vertical-align属性都将失效 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 采用flex布局的元素，称为
移动端布局笔记 概念 英寸 设备的物理尺寸的单位，即屏幕对角线的长度，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后页面变大了（一开始页面内容小得看不清），实际上是布局视口变小了。
作者：Tolonger 原文链接：https://www.jianshu.com/p/9e7e755ca281 除了百分比流式布局之外，rem布局占据了目前移动端布局的热潮。...那么究竟这几种布局差别在哪里，对应的有什么效果，希望本文能给你一些有益的启示。除此之外还有响应式布局，固定宽度布局等。...百分比流式布局 这里面最知名的当属bootstrap框架的思路，他所有的组件以及模板ui均是百分比流式布局，单位为px.并且我们看到的大部分对移动端适配的页面也均是采用这种核心思想去做的，方法简单，多端共用...所以无论怎么看，百分比流式布局都是一种常规+主流的布局方案。...响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位
一、rem 1、意义：当px固定宽度不能适应不同屏幕尺寸时，布局需要，从而产生rem 2、rem 和 em 区别 2.1 rem: root，以根节点（html... 2、利用less计算能力，计算rem @r: 10rem; .main{ width: 400/@r; //400px---->40rem } 三、利用border-sizing布局
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属性（display: flex;），来控制子盒子的位置和排列方式 1.3 flex布局父项常见属性 以下六个属性是对父元素设置的 flex -direction:设置主轴方向
pc_url) 上，添加： 在移动版网页...所需的注释应为: 之前的Meta标记（mobile agent）会继续沿用，但我们推荐使用HTMAL5语言制作的移动页面使用最新方案进行跳转适配...，其它如xml语言的移动页跳转适配，需要继续使用之前的meta标记方式: html5新增的移动适配写法如上,这个主要是为了百度等搜索引擎抓取到网站的移动端网址是什么,不是自动当设备切换到手机时自动跳转的.若实现自动跳转还需要js.
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie，不受数据大小限制，有更好的弹性以及架构，可以将数据写入到本机的ROM中，还可以在关闭浏览器后再次打开时恢复数据...2.专为移动平台定制的表单元素 浏览器中出现的html5表单元素与对应的键盘： 类型 用途 键盘 Text 正常输入内容 标准键盘 Tel 电话号码 数字键盘 Email 电子邮件地址文本框 带有@和....3.丰富的交互方式支持 提升互动能力：拖拽、撤销历史操作、文本选择等 Transition – 组件的移动效果 Transform – 组件的变形效果 Animation – 将移动和变形加入动画支持...设计师要知道，HTML5提供的交互方式是非常丰富的，至于用不用得上，那是你自己的事儿喽！...设计师要知道，用户想要什么，HTML5能提供给用户什么。 5.CSS3 视觉设计师的辅助利器 CSS3支持了字体的嵌入、版面的排版，以及最令人印象深刻的动画功能。
移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。...视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口 layout viewport 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。...我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。...移动端单独制作 流式布局（百分比布局） flex 弹性布局（强烈推荐） less+rem+媒体查询布局 混合布局 响应式 媒体查询 bootstarp 流式布局： 流式布局，就是百分比布局，也称非固定像素布局...流式布局方式是移动web开发使用的比较常见的布局方式。
border-box;``-webkit-box-sizing: border-box; 点击高亮 清除-webkit-tap-highlight-color: transparent; 在ios上移动端浏览器默认的外观加上...-webkit-appearance: none;才能给按钮/输入框添加自定义样式 禁用长按页面时弹出菜单img,a {-webkit-touch-callout: none;} 移动端常见布局 流式布局...flex布局 原理 任何容器都可指定为flex布局 当为父元素指定为flex布局之后，子元素的float,clear,vertical-align都将失效 一.flex布局父项常见属性 1.flex-direction...(Bootstrap框架） 一.响应式布局容器 响应式需要一个父级作为布局容器，来配合子元素实现变化效果。...在不同屏幕下，通过媒体查询来改变布局容器的大小，再改变子元素的布局方式和大小。
移动web开发——flex布局 1.0传统布局和flex布局对比 1.1传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 1.2 flex布局 操作方便，布局极其简单，移动端使用比较广泛 pc...端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局，还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2.0 flex布局原理 flex...是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。...flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。....item { order: ; } 5.0 携程网首页案例制作 携程网链接：http://m.ctrip.com 1.技术选型 方案：我们采取单独制作移动页面方案 技术：布局采取
移动开发之响应布局 1.响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。...响应时需要一个父级作为布局容器，来配合子集元素来实现变化效果 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面的子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化...=1200px）：宽度设置为1170px 2.container-fluid类 流式布局容器 百分百宽度 占据全部视口(ciewport)的容器 适合于单独做移动开发 3.Bootstrap...Bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多十二列 Bootstrap里面container宽度是固定的，但是不同屏幕下...col-md-push-8">左侧 右侧 3.6 响应式工具 为了加快对移动设备友好的页面开发工作
div元素布局 完整代码 规定各个模块样式，DIV可不用加 width代表宽度，height代表高度 ，background代表背景颜色， float代表排序方式， clear 清除左右排序让footing...content_menu">内容菜单 内容主体 底部 布局样式
说实话，我们这次开发移动端的项目，整个项目组的人都是第一次，最初立项的时候为是选择native app和web app还争论了一番，最后综合考虑，我们选择了web（我们选择了h5）开发。...响应式web设计 说到这个，移动开发面对的屏幕尺寸那叫一个丰富，其中安卓阵营就够让人头痛的。...我们在PC端常用的两种布局方式就是固定布局和弹性布局，前者设置一个绝大多数电脑能正常显示的固定宽度居中显示，后者则采用百分比。...关于这两者讨论的文章很多，有兴趣的自己查阅下，我今天要介绍的就是相信你已经听过的”响应式布局”，响应式布局意味着媒体查询，这个在css2就已经出现的东西随着html5、css3的到来又增添了新的生机。...3、HTML5新增标签。 在html5中新增量很多标签，加强连html标签的语义化，如 ?
一、移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问的是不同的页面 , 目前的 京东 / 淘宝 等电商网站移动端页面采取的该方案 ; 响应式页面兼容移动端...: 开发难度较大 , PC 端与移动端访问的是相同的页面 ; 1、单独制作的移动端页面 通过设备类型判断要加载的网页类型 , 一般会在域名前添加 m 打开移动端 , 如京东域名为 jd.com , 使用..., 选择手机设备调试 , 输入 https://www.jd.com/ 域名 , 会自动跳转到 https://m.jd.com/ 手机端页面中 , 京东后台会认为是移动设备请求页面 , 自动跳转到移动端页面...; 2、响应式页面兼容移动端 响应式页面兼容移动端 的原理是 通过 判断当前的 屏幕宽度 , 改变当前的页面样式 , 适应不同的设备 ; 如果不断地缩小浏览器的窗口的宽度 , 网页会不停地自适应修改布局...; 网页不断响应当前设备宽度的变化而进行自适应布局修改 ; 三星页面 https://www.samsung.com/cn/ 在 PC 端的样式 : 手机端访问的是同一个页面 , 响应式页面 制作困难
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
