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？如何在...
Responsivedesign，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。大多数移动浏览器将html页面放大为宽的视图（viewport）以符合屏幕分辨率，可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度，按1：1的尺寸显示并禁止初始的缩放。在<head>标签里加入这个me...
1.设置Meta标签大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。<metaname="viewport"content="width=device-width,initial-scale=1,maxim...