没错，这在移动端中是不会有任何毛病的，但在pc端上就会出现一些异常，浏览器往往并不会根据1rem = 10px去计算你页面上的大小，而是以1rem = 12px 或者是1rem = 16px去计算，这是因为在pc端的浏览器中默认的最小。

首先，你的问题很含糊，适应屏幕，是要做pc端的适配还是手机端的适配呢其次，要达到怎么样的适配效果呢不同效果有不同的方案1如果只是一般的希望盒子能在不同窗口大小中正常比例显示，建议对最外层使用js动态布局。

自适应 当屏小于1050时隐藏 加如下代码media screen and maxwidth 1050px slide display btn display 注意slide和#btn改成你自己的class名和ID名不用谢，求采纳。

目的因为libflexible的源码是针对移动端的设计方案，我们要实现PC的自适应所以屏幕尺寸也要更换3在mainjs中引入我们刚修改过的flexiblejs文件因为我们更改了源码，所有我们需要引入我们改过的文件4在。

现在主要是采用自适应来解决高度，宽度的，以及图片自适应问题，下面就PC端和移动端来总结一下，通常进行自适应高度和宽度，图片时，一般与页面的布局存在关系 1最小尺寸分辨率1024 768传统17寸显示器，则可以采用。

@media screen and minwidth360pxbody，input，selectfontsize1575px 当浏览器的宽度大于360px的时候就是1575px文字大小，这样的话，表格里面的内容就可以完整的显示具体的代码还需要你自己来写。

1是通过百分比来控制宽度2可以通过块状元素自动占满父级的宽度的特性来实现 PS当然还有一些方法，比如css3的flexbox布局，用flex布局的话，非常的方便可以实现多种自适应布局，但是，只适用于移动端，PC端上面只有高。

pc端设计稿是2560自适应其他屏幕的方法最好使用百分比来设置使用插件libflexiblejs 可以自动计算屏幕的宽度，从而设置相的html的fontsize根据html的fontsize来设置元素的大小宽高设计稿是多少我们就设置多少这个。

web让图片在盒子中自适应方法一打开Dreamweaver，然后选中html，出来了一个html标准文档二在标签里添加文件路径，语法如下这时，页面虽然充满了背景，但可以看出背景图片被填充了多次三在里添加样式，代码如下你看。

注意热门市场这里，虽然每一个方块的宽度是随着断点变化的，但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定宽度的，但是也可以完美的适应不同的屏幕3然后在css中 有关margin和padding属性直接用百分比来表示。

手机的屏幕比较小，宽度通常在600像素以下PC的屏幕宽度，一般都在1000像素以上，有的还达到了2000像素同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事在网页代码的头部，加入一行viewport元。

第二种方法是写两套代码，pc端和移动端分开来写，然后再通过添加js获取屏幕的分辨率或者通过获取用户设备来来进行判断用户是在什么设备上打开，然后根据条件来打开页面 这样做的好处是两套代码分开来，维护方便，移动端。

在css样式中给图片设置宽度width100%记住不能直接用像素值，这样随着屏幕分辨率的不同宽度始终等于屏幕的宽度，高度也会随着宽度的改变而改变，如有疑问可继续追问，如没有疑问请采纳，谢谢。

1宽度由百分比控制2它可以通过块元素自动占据父元素宽度的特性来实现PS当然也有一些方法，比如css3的flexbox布局使用flex布局，可以非常方便地实现各种自适应布局但是，它只适用于移动终端只有PC端的高版本浏览。

解释响应式布局是如何实现的有几种方法可以实现它1本机代码实现目前国内设计网页时，一般分为PC端和移动端两套页面但是在一定的情况下，必须满足只设计一个页面，不同的端口都可以正常使用因此，将使用自适应。

PC端用rem首先要用resize函数把平常用的remjs包含起来，因为手机屏幕宽度固定，而pc端可以改变浏览器窗口大小另外pc端一般不用rem主要是对低版本浏览器的兼容性问题，比如从ie9才开始支持rem，但是只是部分支持ie11才。