CSS媒体查询-px何时不是像素？
我正在研究CSS，它可以在桌面、平板电脑和手机的不同断点（以像素表示的窗口宽度）之间切换布局CSS媒体查询-px何时不是像素？,css,google-chrome,internet-explorer,media-queries,Css,Google Chrome,Internet Explorer,Media Queries,我正在研究CSS，它可以在桌面、平板电脑和手机的不同断点（以像素表示的窗口宽度）之间切换布局 @media screen and (min-width: 350px) and (max-width: 700px) { ... } @media screen and (min-width: 701px) and (max-width: 1000px) { ... } @media screen and (min-width: 1001px) { ... } 我注意到，如果我重新调整一个窗口的大
@media screen and (min-width: 350px) and (max-width: 700px) { ... }
@media screen and (min-width: 701px) and (max-width: 1000px) { ... }
@media screen and (min-width: 1001px) { ... }
/*==1。所有尺寸设备的通用样式==*/
正文{
字体系列：Arial、Helvetica、无衬线字体；
背景：灰色；
}
#页面{
背景：浅灰色；
}
#页眉、#导航、#主、#页脚{
背景：白色；
填充：0.7em；
}
#导航，#主，#页脚{
边缘顶部：1.5em；
}
#导航，#主{
页边距底部：1.5em；/*将页脚推开*/
}
#标题{
颜色：红色；
字号：3em；
字体大小：粗体；
}
#导航ul{
列表样式：无；
左侧填充：0；
}
#主要td：第一个孩子{
空白：nowrap；
字体大小：粗体；
文本对齐：右对齐；
}
#主td{
填充：0.5em 0.2em 0；
垂直对齐：顶部；
}
#页脚{
文本对齐：右对齐；
}
/* ====== 2. 手机的造型========*/
@媒体屏幕和（最小宽度：350px）和（最大宽度：700px）{
#标题{颜色：橙色；}
#导航ul{边距：1em；}
#导航li{显示：内联；右边距：1.2em；}
}
/* ====== 3. 平板电脑的样式=====*/
@介质屏幕和（最小宽度：701px）和（最大宽度：1000px）{
#标题{颜色：蓝色；}
#主{宽度：80%；浮动：右；}
#导航{float:left；}
#页脚{清除：两个；}
}
/* ====== 4. 桌面的样式=====*/
@媒体屏幕和屏幕（最小宽度：1001px）{
#标题{颜色：绿色；}
#页面{
宽度：55em；
利润率：2米自动；
}
#主要{
浮动：对；
宽度：74%；
}
#航行{
浮动：左；
宽度：18%；
}
#页脚{清除：两个；}
}
布局和字体大小测试
站点名称
欢迎访问站点名称！
记事簿
2015年6月18日18:30
Lorem ipsum dolor sit amet
2010年7月1日509:00
阿迪皮斯精英圣职酒店
2015年8月9日18:00
临时劳工和福利费
麦格纳阿利夸。这是一个小小的节日
实习ullamco laboris nisi ut aliquip
乱数假文
多洛·希特·阿梅特，祝你好运
Elite，请暂时输入劳工和福利
麦格纳阿利夸。这是一个小小的节日
实习ullamco laboris nisi ut aliquip
ex ea commodo consequat。二人世界
用纤毛多洛雷卷曲的纤毛
欧盟福吉亚无法定权利。
乱数假文
多洛·希特·阿梅特，祝你好运
Elite，请暂时输入劳工和福利
麦格纳阿利夸。这是一个小小的节日
实习ullamco laboris nisi ut aliquip
ex ea commodo consequat。二人世界
用纤毛多洛雷卷曲的纤毛
欧盟福吉亚无法定权利。
- 这里
- 那里
- 某处
- 别处
- 这里
- 那里
- 你
- 超越
&抄袭；版权所有RGB 2015
*{padding:0；margin:0；}