关键词：
页面布局→俗称搭建页面结构（html）和增加页面样式（css）
随着html5和css3的发展，页面布局工作也越来越复杂，但是也可以越来越好看
随着科技发展布局也分为：pc端布局和移动端布局
pc端布局的难点是要兼容每个浏览器→chrome FF IE 6 7 8，最烦人的是ie，具体的问题自己可以百度
移动端不需要兼容每个浏览器，移动端只有一个内核浏览器 -webkit- 但是需要兼容各个尺寸
各个尺寸有很多：
苹果4-8 有320 375 414 等 这些是苹果手机的不同宽度的尺寸
android尺寸 320-640不等，
还有一些其他的国产机 尺寸大的惊人 有1024的尺寸
页面要自适应这些宽度不等的设备，有很多技术，主要介绍弹性布局和rem布局
弹性布局：相当于被父级加一个属性，那么他就相当于一个可以变宽变窄的容器，然后你可以在里边放东西
弹性盒子：
父级：
display:-webkit-box;（父级变成弹性盒子）
子级：
-webkit-box-flex: 1;（自己自己占多少分数，分数具体怎么分百度）
然后是一些属性：
方向：
-webkit-box-orient: vertical;
水平：-> 分宽度
垂直: -> 分高度
排列方式：
-webkit-box-direction: reverse; 倒着排
水平排列：
-webkit-box-pack:center;
垂直排列：
-webkit-box-align: center;
还有让子元素水平居中，垂直居中，水平垂直居中的属性等。
弹性布局也要注意几点：
* 弹性只能加给父级，也就是说你想让那些元素在一起排列就给它的父级加弹性
* 用弹性了，子级就不能浮动，这个要记住后期维护很重要。
定位和弹性不能一起用
还有一点：移动端的页面必须要加上几个meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-
scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
具体为什么加百度，有可能会查出更多的meta标签，不过也是根据具体情况自己加
————————————————————————————————————————————————
rem布局
依赖根元素来计算的方式，就是先给予html元素一个font-size，然后我们所有的rem就根据这个font-
size来计算
比如：html{ font-size:16px;} 那么1rem=16px来计算，浏览器默认是16px,转成px比较麻烦所以可以
设置成html{font-size=62.5% 也就是默认10px的字号} 但是浏览器最小是12px,小于12px会做12px来计算所有
可以用js动态来设置
<script type="text/javascript">
(function(win,doc){
function change(){
doc.documentElement.style.fontSize=m(字体大小)*doc.documentElement.clientWidth/n（
设计图宽度）+‘px‘;
}
change();
win.addEventListener=(‘resize‘,change,false);
})(window,document)
</script>
如何在不同尺寸下显示不同的宽高，需要根据设计稿的宽度，如果设计稿是320，可以是字体大小是20，px转换
rem就是px/20
————————————————————————————————————————————————
还有流体布局，等乱七八糟（有时间在说）
移动端布局
一、移动端和pc端布局的不同1.显示设备（屏幕）2.操作（鼠标、指尖）3.浏览器内核:移动端不用考虑ie，但是各种浏览器内核（手机自带）、微信浏览器内核4.运行设备移动设备（轻便、迅速、便携）pc端（体验）5.网络不同移动4... 查看详情
移动端布局解决方案+神器
godcss移动端布局终极解决方案+神器---让移动端布局开发更加容易http:/www.github.com/godcss/介绍godcss不是一个库，也不是一个框架。它是一个移动端布局开发解决方案。使用godcss可以让移动端布局开发更容易。使用动态的HTML根字体大... 查看详情
移动端布局1：媒体查询结合rem实现移动端布局(代码片段)
第一步：先写好重置的样式。直接复制粘贴即可@mediaalland(max-width:320px) html font-size:12px; @mediaalland(min-width:321px)and(max-width:375px) html font-size:14px; @mediaalland(min-width:376px) html 查看详情
移动端rem布局
移动端布局(function(doc,win){vardocEl=doc.documentElement,//设备宽度rem=100,//1rem代表100pxdesW=640,//设计稿宽度resizeEvt=‘orientationchange‘inwindow?‘orientationchange‘:‘resize‘,recalc=function(){varclientWidth=docE 查看详情
rem与移动端布局
移动端布局痛点在：兼容各个分辨率的移动设备，同样是手机，iPhone4-iPhoneX分辨率范围就已经很广；如果使用px进行布局，显然会出现问题； 常见的像素单位px,em,rem中，em是相对于父元素font-size的单位，个人认为在使用... 查看详情
移动端web开发流式布局flex布局rem布局(代码片段)
文章目录移动端Web开发流式布局flex布局布局原理常用属性rem布局rem基础媒体查询less移动端Web开发流式布局在PC端进行网页制作时，经常使用固定像素的网页布局，但这种布局方式对小屏幕的设备不友好。为了适应小屏幕... 查看详情
第32章项目实战-移动端流体布局6
第32章项目实战-移动端流体布局[6]学习要点：1.旅游资讯2.机票预定本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．旅游资讯这个如果做成移动端，那么一切从简，... 查看详情
移动端布局
最近做了一个针对微信移动端的项目，在开发中遇到了不少的坑，学到了也不少，发现有许多地方值得写一下，以供做web移动端同学参考参考。一、单位 说到移动端，不得不提适配问题，大大小小的移动设备不但让做android... 查看详情
移动端页面布局
移动端页面布局一、移动端app分类1、NativeApp原生app手机应用程序 使用原生的语言开发的手机应用，Android系统用的是java，ios系统用的是object-C2、HybridApp混合型app手机应用程序 混合使用原生的程序和html5页面开发的手机应... 查看详情
移动端布局方案网易
移动端布局：rem方案：页面中的任何元素都采用rem布局，包括字体。1<!DOCTYPEhtml>2<htmllang="zh-CN">34<head>5<metacharset="UTF-8">6<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">7<metana 查看详情
移动端布局(代码片段)
1.移动布局 1.移动设备：手机和iPad 安卓系统iOS系统 安卓系统，内置浏览器是谷歌iOS内置Safari浏览器他们的内核是webkit， 不考虑兼容性，需要考虑的是安卓和iOS的区别 2.布局 设备宽度：设... 查看详情
移动端页面布局
移动端页面布局一、移动端app分类1、NativeApp原生app手机应用程序 使用原生的语言开发的手机应用，Android系统用的是java，ios系统用的是object-C2、HybridApp混合型app手机应用程序 混合使用原生的程序和html5页面开发的手机应... 查看详情
h5移动端布局
在开始移动端布局前要先了解一下设备宽度，页面大小，浏览器视口三者之间的区别 设备宽度：实物设备的大小，设备的分辨率，具体数据是设备生产的厂家给的。 页面大小：设计稿上规定的页面的宽度和高度 浏览... 查看详情
移动端布局
移动布局1.移动设备有手机和ipad安卓系统ios系统安卓系统的内置浏览器是谷歌ios内置safari浏览器他们的内核都是web，不考虑兼容性，需要考虑的问题是安卓和ios的区别问题2.布局(写页面)要考虑以下几点设置的宽度设备的实际大... 查看详情
移动web开发之flex布局(代码片段)
...与flex布局传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局flex弹性布局操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况较差IE11或更低版本，不支持或仅部分支持建议：1.如果是PC... 查看详情
移动web开发之flex布局(代码片段)
...与flex布局传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局flex弹性布局操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况较差IE11或更低版本，不支持或仅部分支持建议：1.如果是PC... 查看详情
从web移动端布局到reactnative布局
在web移动端通常会有这样的需求，实现上中下三栏布局（上下导航栏位置固定，中间部分内容超出可滚动），如下图所示：实现方法如下：HTML结构：<divclass=‘container‘><divclass=‘header‘></div><divclass=‘content‘>&... 查看详情
移动端适配的问题
1.如何适配？想要在移动端的不同尺寸设备间做适配，使得页面布局可以等比例缩放。于是我立刻想到了百分比布局和rem布局。百分比布局无法适配性定高，只能用px定死，显然这是无法接受的。rem布局不是响应式布局方案，它... 查看详情