如何为移动屏幕编写浮动框代码

Question

我正在尝试在网站上执行以下操作。我想对于那些编程很多的人来说这很简单，但对我来说它是新的。有人可以告诉我如何编码吗？谢谢！

电脑屏幕和手机屏幕布局

Answer 1

您需要使用媒体查询来使您的 HTML 和 CSS 代码在不同设备上的用户浏览器中产生不同的结果。

媒体查询通常基于 max-width 浏览器视口。

因此，如果浏览器视口宽度小于 800 像素，则会应用其他样式。

.box
{
  display: inline-block;
  margin: 0 10px;
  width: 180px;
  height: 180px;
  border: 1px solid #CCC;
  background: #DDD;
}

@media screen and (max-width: 800px)
{
  display: block;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

对于 iPad 和 iPhones

如果您需要在 iPad 和 iPhones 上有不同的布局，您需要从这篇文章中获取适当的媒体查询：http://stephen.io/mediaqueries/。您必须为要特别支持的每个设备编写特定的 CSS 规则。

布局示例：

桌面布局

平板电脑布局

Phone布局

(图片来自w3schools.com)

About media queries:

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

如何为移动屏幕编写浮动框代码

How to code floating boxes for mobile screens

mobile

screen

floating

responsive-design

box