Html 最大宽度em的响应不起作用

我基于此模板创建了一个登录页

我用的是：

@介质（最大宽度：43.75em）

我打开Chrome Dev Tools查看移动设备，但似乎它没有进入

@媒体（最大宽度：43.75em）

响应速度快，但不起作用

我在本地主机上进行了测试：

对于相同的代码，它在Codepen或JSFIDLE上进行了测试，可以正常工作

我不知道我的情况有什么问题：

您可以在我的笔中访问，选择导出为.zip以在本地主机中显示：

@charset“UTF-8”；
@导入url（“//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css”）；
@导入url（//fonts.googleapis.com/css？family=Open+Sans:400700800300）；
* {
框大小：边框框；
}
html{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
身体{
宽度：100%；
身高：100%；
字体系列：“开放式Sans”、“Helvetica Neue”、“Helvetica、Sans serif”；
字体大小：100%；
线高：1.45；
颜色：#141414；
}
a{
文字装饰：无；
}
a:悬停{
文字装饰：无；
}
img{
最大宽度：100%；
}
.btn{
显示：内联块；
保证金：1rem 0；
颜色：白色；
字号：500；
字体大小：1.3rem；
背景：#007ece；
字母间距：.02em；
边界：无；
边界半径：5px；
填充物：8雷姆1雷姆9雷姆；
文本阴影：0 1pxRGBA（0,0,0,0.3）；
盒影：0.02×rgba（0,0,0,0.2）；
}
.btn:悬停{
背景：#008ee8；
颜色：#fff；
}
.btn：焦点，
.btn：活动，
.btn:焦点：活动{
背景#006eb5；
边框颜色：#006eb5；
盒影：0 2px 5px 0 rgba（0,0,0,0.5）插入；
}
.集装箱{
保证金：0自动；
宽度：90%；
最大宽度：900px；
}
标题{
颜色：白色；
背景：#007ece；
填充：10rem 0；
文本对齐：居中；
位置：相对位置；
z指数：1；
溢出：隐藏；
}
收割台h1{
字体大小：3rem；
保证金：0.01勒姆；
}
收割台h2{
字体大小：300；
字体大小：1.5rem；
保证金：0.01勒姆；
}
部分{
背景：#fff；
颜色：#1c262b；
填充物：3.5雷姆0；
}
第节——主要{
背景：#007ece；
颜色：#fff；
}
第节。第节——主要——alt{
背景：#27a4f4；
颜色：#fff；
}
剖面图—主剖面图—灯{
背景：rgba（0，126，206，0.1）；
}
第节——灰色{
背景：#1c262b；
颜色：#fff；
}
截面——灰色——浅灰色{
背景：#29363e；
颜色：#fff；
}
第h3节{
文本对齐：居中；
字号：2rem；
字体大小：300；
保证金：0.01勒姆；
}
第二节{
字号：1.2rem；
字体大小：300；
}
第p节{
字号：1.2rem；
字体大小：300；
}
上校，
.col-7，
.col-3，
上校5{
利润率：01.5%；
显示：内联块；
垂直对齐：顶部；
}
上校7{
宽度：64%；
}
上校3{
宽度：29%；
}
上校5{
宽度：30%；
}
.详情{
文本对齐：左对齐；
}
.详情h3{
字号：2rem；
文本对齐：左对齐；
}
.特征{
文本对齐：居中；
填充：1rem；
}
.特点：悬停{
背景：rgba（255，255，255，0.1）；
}
.特色一{
字号：4rem；
保证金：0.02Rem 0；
}
.特色{
保证金：0.01雷姆0；
字号：1rem；
}
大宗报价{
位置：相对位置；
保证金：0；
填充：0；
文本对齐：居中；
}
区块报价：之前{
显示：内联块；
颜色：#007ece；
字号：2rem；
内容：'\201C'；
}
blockquote p{
保证金：0；
显示：内联；
字体大小：1.5rem；
}
区块引用{
字号：1rem；
显示：块；
保证金：5雷姆0.1.2雷姆；
文字风格：斜体；
}
区块引用：之前{
内容：‘–’；
}
页脚{
背景：#2d2b2a；
颜色：#fff；
填充：2rem0；
文本对齐：居中；
字体大小：.8rem；
颜色：rgba（255，255，255，0.4）；
}
页脚ul{
保证金：0；
填充：0；
列表样式：无；
}
页脚ulli{
显示：内联块；
}
页脚ulli a{
显示：块；
填充：.4rem.7rem；
字体大小：.9rem；
文字装饰：无；
颜色：rgba（255，255，255，0.7）；
}
页脚：悬停{
颜色：白色；
}
.文本--居中{
文本对齐：居中；
}
.文本--左{
文本对齐：左对齐；
}
.bg图像{
背景：#007ece；
文本对齐：居中；
位置：相对位置；
z指数：1；
溢出：隐藏；
}
.bg图像：之前{
内容：''；
显示：块；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
宽度：100%；
身高：100%；
z指数：-1；
背景：#333 url（“http://orbotix.wpengine.netdna-cdn.com/wp-content/uploads/2013/07/Faster-4H5B55491.jpg）无重复上止点；
背景尺寸：封面；
背景附件：固定；
-webkit过滤器：模糊（5px）；
过滤器：模糊（5px）；
不透明度：.8；
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}
.bg-image.bg-image-2:之前{
不透明度：.6；
背景图像：url（“http://orbotix.wpengine.netdna-cdn.com/wp-content/uploads/2013/07/Kids3.jpg");
背景位置：中心；
}
@介质（最大宽度：43.75em）{
.btn{
填充物：5雷姆。7雷姆。6雷姆；
字号：1rem；
}
标题{
填充：2rem0；
}
收割台h1{
字号：2rem；
}
收割台h2{
字体大小：1.5rem；
}
部分{
填充：2rem0；
}
第h3节{
字体大小：1.5rem；
}
上校7{
宽度：100%；
保证金：0；
}
上校3{
宽度：100%；
保证金：0；
}
上校5{
宽度：60%；
保证金：0；
}
.详细信息img-球{
高度：200px；
宽度：自动；
保证金：0自动；
}
.特征{
宽度：100%；
保证金：0；
文本对齐：左对齐；
边框底部：1px实心rgba（255、255、255、0.2）；
}
.特征：最后一个孩子{
边界：无；
}
.特色一{
字体大小：1.5rem；
宽度：2em；
文本a