我看到一些人直接在网站上编写了一个桌面代码,但其他人在怨恨所有样式后 - 直接在媒体查询中开始编码......用于桌面,平板电脑和手机。 有没有最好的做法或者是偏好?
wrapper {
width: 85%;
margin: 0 auto;
font: 90% Georgia, "Times New Roman", Times, serif;
}
.col1 {
float: left;
width: 40%;
margin-right: 5%;
}
.col2 {
float: left;
width: 25%;
margin-right: 5%;
}
.col3 {
float: right;
width: 25%;
}
@media screen and (max-width: 1280px)
wrapper {
width: 85%;
margin: 0 auto;
font: 90% Georgia, "Times New Roman", Times, serif;
}
.col1 {
float: left;
width: 40%;
margin-right: 5%;
.
..
...
}
此外,如果我为5个不同的页面编写媒体查询,例如
@media screen and (max-width: 1280px)
/* Main Page */
wrapper {
width: 85%;
margin: 0 auto;
font: 90% Georgia, "Times New Roman", Times, serif;
}
.col1 {
float: left;
width: 40%;
margin-right: 5%;
/* Gallery */
/* Contacts */
如果失败变得很大,这是使用评论的最佳方式,所以我不会迷失它吗?
答案 0 :(得分:0)
@ user2852447,首先你必须知道什么是媒体查询。
响应式设计:为一个URL提供相同的HTML,并使用CSS媒体查询来确定如何在客户端呈现内容。这消除了用户代理检测的可能故障,并使用户免于重定向。
现在什么是响应式设计......? 响应式设计:响应式Web设计是一种设置,服务器始终将相同的HTML代码发送到所有设备,CSS用于使用媒体查询更改设备上页面的呈现。 我们建议用于智能手机的CSS媒体查询是:
@media only screen和(max-width:640px){...} //它将根据此媒体查询中的CSS定义呈现屏幕视图。 因此,我们可以使用CSS Media Query来实现针对不同设备的响应式设计。 CSSMEDIA QUERY:通过使用@media规则,网站可以为屏幕,打印,手机,平板电脑等设置不同的布局。 媒体查询允许我们使用分辨率,宽高比,方向和颜色索引等属性为特定设备设置元素样式。媒体查询在CSS3中引入,使用它我们可以定位特定的屏幕尺寸。
媒体查询属性:我们可以通过组合媒体查询功能来识别设备浏览器或硬件的特征。其中一些如下。
基本上,媒体查询是一种可以使现有网站与移动设备和平板电脑兼容的工具。