meta对于移动端的一些特殊属性，可根据需要自行设置移动端H5项目越来越多，设计师对于UI的要求也越来越高，比如1px的边框。在高清屏下，移动端的1px会很粗。那么为什么会产生这个问题呢？主要是跟一个东西有关，DPR（devicePixelRatio）设备像素比，它是默认缩放为100%的情况下，设备像素和CSS像素的比值。目前主流的屏幕DPR=2（iPhone8），...

　　响应式开发原理：通过使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。平时我们的响应式尺寸划分超小屏幕（手机，小于768px）∶设置宽度为100%小屏幕...

　　流式布局，就是百分比布局，也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕宽度进行伸缩，不受固定像素限制，内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。传统布局：兼容性好布局繁琐局限性，不能在移动端很好的布局flex弹性布局：操作方便，布局极为简单，移动端应用广泛PC端浏览器支持情况较差IE11或更低版本，不支持或仅支持部分建议：如果是PC端页面布局，我们还是传...

　　通常移动端的布局方式1、rem布局，通过动态设置根目录下的font-size达到元素大小“自适应”，通常和百分比布局一起使用2、固定像素设固定视口宽度。3、最费事的mediaquery，根据设备视口宽度不同设置不同的样式，换句话说一个页面有多套样式。可以说是正宗的响应式布局。常规的做法带来的苦恼常规的这些做法总有一些缺陷是令人遗憾的：1、rem和百分比布局，这种布局rem终归也是有极限的，当...

　　所谓移动端适配，就是WebApp在不同尺寸的屏幕上等比显示原理：通过设置,将所有设备布局视口的宽度调整为设计图的宽度。rem：CSS的长度单位，根元素字体大小的倍数，只有根元素字体大小有关；html中的根元素即html元素。大部分浏览器的默认字体大小都是16px，所以1rem=16px；rem适配原理：长度单位都是用rem设置当屏幕尺寸改变时，只需要修改html元素的...

　　视口就是浏览器显示页面内容的屏幕区域。视口分为布局视口、视觉视口和理想视口。布局视口layoutviewport布局视口是移动设备的浏览器默认设置的一个视口，用于解决早期的PC端页面在手机上显示的问题，一般这个视口默认的分辨率是980px，这种情况下元素显示得都比较小，需要手动缩放网页才能看清。视觉视口visualviewport视觉视口指的是用户正在看到的网页的区域，可以通过缩放去操...

　　流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称百分比自适应的布局。流式布局实现方法是将CSS固定像素宽度换算为百分比宽度。换算公式如下：目标元素宽度/父盒子宽度=百分数宽度下面通过一个案例来演示固定布局如何转换为百分比布局，如示例1所示。【示例1】　固定布局转换为百分比布局打开Chrome浏览器访问示例代码，页面效果如图1所示。图1运行效果可以尝试改变浏览...

　　特点：1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。2、内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）浮动布局（float）特点：默认布局下，块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示。就需要使用float来实现。如下3、层模型特点：如果我想一个div在另外一个...

　　什么是移动端？移动端故名思义是为移动终端，大名叫移动通信终端，是指可以在移动中使用的计算机设备。其实就是我们常说的手机。什么是布局？前端开发中布局是将主要的html结构布置好。rem是什么？rem是一种长度单位，是而且仅是根据根元素html改变的长度单位。Rootem（REM）是CSS3中新定义的一种长度单位。和之前的em（根据父元素改变大小）单位相比在使用上具有明显的优势。著名的响应式we...

　　（1）使用媒体查询更改HTML的font-size值（2）页面中所有布局使用rem单位布局缺点：不能精细的适配到每一个设备，代码量较大原理：媒体查询获取不同的设备，在不同的设备当中更改根节点的字体大小之前讲过了媒体查询和rem的布局，但是有没有发现工作量很大呢，所以下面就详细说下这几种布局方式；html和rem的适配（1）使用vw单位作为HTMLfont-size的单位（计算）（2）页面所...