1、常见的布局方案固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸;可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局;弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果;混合布局：同弹性布局类似，可以适应一...

　　1.直接在CSS文件中使用：@media类型and(条件1)and(条件二){css样式}@mediascreenand(max-width:1024px){body{background-color:red;}}2.使用@import导入@importurl("css/moxie.css")alland(max-width:980px);3.也是最常用的方法--直...

　　前端开发经常遇到自适应布局的项目，对于轮播图，自适应解决方案有很多种。常规的我们直接可以利用imgmax-width="100%"的属性，让图片自己本身自适应屏幕，但是这样会出现问题，因为pc端轮播图的长宽比一般都是长比宽多很多，自适应到手机就显得图片高度很窄，影响美观，对此，解决方案就是手机端和pc端分别调用，这样就要求后台给pc和手机两个不同上传图片的端口，前端处理也麻烦。在一个就是利...

　　一、rem布局1.em相对于父元素的字体大小而言；rem是相对于html的字体大小而言2.优势：可以通过修改html的文字大小来改变整个页面中元素大小，实现整体控制二、@media媒体查询：针对不同的屏幕尺寸设置不同的样式1.语法：@mediamediatypeand|not|only（mediafeature）{CSS-Code；}①mediatype查询类型：all（所有设备...

　　一、什么是响应式布局？响应式布局是EthanMarcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，...

　　一个页面兼容了pc端，pad端，和手机端响应式布局是不需要单独写移动端页面的响应不同的设备发生不同的变化时，包括三端之间的变换。响应式开发原理就是使用媒体查询（mediaquery）针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。通过媒体查询实现档位的变化响应式布局容器响应式需要一个父级（。container）作为布局容器，来配合子级元素来实现变化效果。（pc端三列显示，一旦...

　　就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的设备划分尺寸之间超小屏幕（手机）<768px小屏设备（平板）>=768px——992px中等屏幕（桌面显示器）>=992px——<1200px宽屏设备（大桌面显示器）>=1200px响应式需要一个父级做为布局容器，来配合自己元素来实现变化效果原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在...

　　HTML5的设计目的是为了在移动设备上支持多媒体；HTML5简单易学；HTML5是下一代HTML标准；HTML,HTML4.01的上一个版本诞生于1999年。自从那以后，Web世界已经经历了巨变；HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持；HTML5新特性用于绘画的canvas元素用于媒介回放的video和audio元素对...

　　最近写了第三个移动端H5的项目，准备记录下自己在H5项目中的一些实践探索。移动端H5与PC端开发最大的区别之一，大概就是响应式布局问题。那么下面我们就来聊聊移动端响应式布局，了解他的来龙去脉，对现有的最佳解决方案探索吧。全文将围绕下面几个问题进行论述和展开：移动端H5相关页面，相比PC端有哪些值得注意的点？移动端H5响应式布局有哪些解决方案？什么是rem？如何在...

　　适合前端响应式设计新手学习参考：1、布局的响应式：不能使用绝对尺寸使用float使布局具有流动性，同时不易出现横向滚动条2、字体的响应式使用相对字体3、图片视频等媒体资源的响应式设置宽度max-width:100%;或者width：100%；4、css3媒体查询的使用响应式设计的关键是媒体查询的应用，有两种方式可以应用媒体查询①<linktype=”text/css”rel=”style...