css3媒体查询适配手机端代码转化rem，css 手机适配

移动端高度怎么自适应?

现在主要是采用自适应来解决高度，宽度的，以及图片自适应问题，下面就PC端和移动端来总结一下，通常进行自适应高度和宽度，图片时，一般与页面的布局存在关系。

设计稿尺寸为750 * 1340，移动端rem自适应方案一般分2种 网易做法 整个屏幕为5rem，1rem=100px 淘宝做法 整个屏幕为10rem，1rem=75px 当然也可以转化为px ： rem = 100 ： 1。

高度自适应：height 如果块级元素不设置高度，并且没有内容时，元素在浏览器不显示。如果块级元素不设置高度或者设置auto的时候，可以做到自适应。内容多高，元素高度就是多少。

在文档流中，DIV的高度默认就是根据内容的高度自适应的。如果是想适配不同设备的窗口大小，可以设置百分比。或者通过position定位，然后设置top和bottom值。

相关问答

Q1: html如何适应手机?

1、在手机上不能固定宽度，要按百分比写页面宽度。才能自适应设备。主要是这两点，当然细节上面还有很多和PC端不一样的地方。我就不述了，你按照上面亮点写你的页面，就能解决你说的问题。

2、meta name=viewport content=initial-scale=1， maximum-scale=3， minimum-scale=1， user-scalable=no这个申明是移动设备用的，1：1显示设备屏幕大小，禁止缩放在手机上不能固定宽度，要按百分比写页面宽度。

3、function(){$(body).css(zoom， $(window).width() / 640)；$(body).css(display ， block)；})；试试呢~~用link标签...可以试试。 又学习了，不过手机同时兼容大显示器分辨率还是不行吧。

Q2: 在css中输入px怎么自动换算成rem

1、CSS3中的Rem值与Px之间的换算：bootstrap默认 html｛font-size： 10px；}rem是一个相对大小的值，它相对于根元素，比如假设，我们设置html的字体大小的值为html｛font-size： 85%；｝（也就是14px）。

2、引入responsive.css成功后，之后在写页面样式的时候就可以按照 设计稿上显示宽度 除以 2 除以 100 得到。

3、点击图中用边框标示的部分，进入“用grunt写了一个px和rem互转的工具”页面，在该文章的末尾还提供了一个在线转换工具，如下图所示，可以很方便地将px转换为rem，批量操作，几秒就能完成。

4、用 gulp-replace 写个任务替换rem。

5、XXXpx}.假设页面宽750px，html{font-size：100px}，即100px=1rem。

Q3: css样式布局及rem用法梳理

首先css3规定1rem = html根节点的font-size，rem也就是root em简写。 为了方便计算通常设置根节点font-size = 100px 那么 1rem = 100px 核心思想： 百分比布局可实现响应式布局，而rem相当于百分比布局。

【rem布局】：rem是指html元素上的字体大小对应的像素数值，使用rem为长度单位。

在移动端我们一般会设置布局视口宽度=设备宽度，即内容呈现的区域在设备屏幕内。但不同设备的宽度不同，因而让布局视口的宽度也不同。比如 iPhone 6 的布局视口宽度为 375， iPhone6 Plus 布局视口的宽度为 414。

Q4: 手机页面设计图是1080怎么用rem做适配用css

1、html { font-size： 42px； } 按照设计图的像素进行开发 按照正常网页开发流程，进行网页开发即可。

2、rem等于html根元素设定的font-size的px值，假如我们在css里面设定下面的css。

3、在移动端我们一般会设置布局视口宽度=设备宽度，即内容呈现的区域在设备屏幕内。但不同设备的宽度不同，因而让布局视口的宽度也不同。比如 iPhone 6 的布局视口宽度为 375， iPhone6 Plus 布局视口的宽度为 414。

4、我的意思是不用像素，用rem，因为px是写死的，rem是可以适应手机端的（包括盒子的宽高都是要以rem来计算）。

5、个CSS像素所占屏幕的物理尺寸是一样大的长度单位rem是相对于html标签的font-size（字体尺寸）的。例如html标签设置font-size：36px，同时div设置width：2rem。

Q5: 怎么用CSS3媒体查询

1、媒体查询可用于以下内容：（1）使用CSS @media和at-rules有条件地应用样式。（2）针对特定媒体的，以及其他的HTML元素。（3）为了测试和监控媒体状态使用Window.matchMedia()和JavaScript的方法。媒体类型all：适用于所有设备。

2、bootstrap响应式布局实现原理：通过CSS3 Media Queries（媒体（设备）查询），媒体查询是让页面内容在不同的媒体环境下运行时可以展示不同的样式（这个样式当然是由我们来书写规定的）。

3、name=viewport是视窗的意思，width=device-width就是页面宽度自适应设备宽度，initial-scale=0是默认页面缩放比例，0就是不缩放，user-scalable=no是禁止用户手动缩放页面。

4、css3媒体查询就是为了适应各种设备，查询媒介设备，来添加不同的样式，不会在行内使用；从web标准的设计来讲，主张css样式和html结构分离，建议使用外部文件或内联样式。

5、可以用谷歌浏览器里面有iPhone5的尺寸，然后用媒体查询它的宽度就行了 媒体查询(media queries)是响应式设计(Responsive Web Design简称RWD)必不可少的一部分。

6、通过css3的媒体查询功能。不同的分辨率之下赋予标签不同的背景图片，可以实现上述功能。

关于css3媒体查询适配手机端代码转化rem和css 手机适配的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。