How to code floating boxes for mobile screens

问题

I´m trying to do the following on a website. I guess it´s quite simple for thoose who have programmed alot but for me it´s new. Can someone show me how to code this? Thanks!

Layout on computer screen and mobile screen

回答1:

You need to use media queries to make your HTML and CSS code produce different results in user's browser on different devices.

Media queries usually based on max-width of the browser viewport.

So, if browser viewport will be less than 800px wide, additional styles will be applied.

.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>

For iPads & iPhones

If you need to have different layouts on iPads and iPhones, you need to take proper media queries from this article: http://stephen.io/mediaqueries/. You have to write specific CSS rules for each device you'd like to support in particular.

Layout examples:

Desktop layout

Tablet layout

Phone layout

(Pictures are from 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/

来源：https://stackoverflow.com/questions/33688764/how-to-code-floating-boxes-for-mobile-screens

标签

mobile

responsive-design

screen

floating

box