如何自动调整所有移动/平板电脑显示格式的div大小？ [英] How to auto adjust the div size for all mobile / tablet display formats?

问题描述

我设计了一个网页，其中有四个 div 标签。如果我在手机（5英寸）测试页面，它完美地适合页面，如果我测试在平板电脑中的页面适合在30％的屏幕的同一页。那么如何设置 div 大小，以适合所有类型的屏幕。

I have designed a page where four div tags are there in the page. If I test the page in mobile phone (5 inch) it fits the page perfectly, If I test the same page in tablet the page fits with in 30% of the screen. So how can I set the div size so that it will fit for all type of screens.

小提琴链接

HTML：

  <div class="bubble0" align="center">
     <h3>Three  Levels </h3> 
  </div>
  <div class="bubble"  align="center"> </div><br/><br/>
  <div class="bubble1" align="center"> </div><br/><br/>
  <div class="bubble2" align="center"> </div><br/><br/>
  <button>Play</button>

任何建议，

推荐答案

这称为响应式Web开发（RWD）。
为了使页面响应所有设备，我们需要使用一些基本的基础，如： -

This is called Responsive Web Development(RWD). To make page responsive to all device we need to use some basic fundamental such as:-

1。在头部设置视口元标记：

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>

2.使用 media queries 。 / strong>

2.Use media queries.

示例： -

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

3。或者，我们可以直接使用 RWD框架： -

3. Or we can directly use RWD framework:-

• Bootstrap


• 基金会3等

• Bootstrap
• Foundation 3 etc.

一些好文章

标准设备的媒体查询 - by CHRIS COYIER

CSS媒体维度

4。大型装置，中型装置&小型设备媒体查询。

4. Larger Device, Medium Devices & Small Devices media queries. (Work in my Scenarios.)

在通用设备类型的媒体查询之下： - 更大的设备，小设备。
这只是基本的媒体类型，适用于所有的场景&容易处理代码而不是使用各种媒体查询只需要关心三种媒体类型。

Below media queries for generic Device type: - Larger Device, Medium Devices & Small Devices. This is just basic media types which work for all of scenario & easy to handle code instead of using various media queries just need to care of three media type.

/*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/
@media screen and (min-width: 1024px){
/*Style*/
}

/*###Tablet(medium)###*/
@media screen and (min-width : 768px) and (max-width : 1023px){
/*Style*/
}

/*### Smartphones (portrait and landscape)(small)### */
@media screen and (min-width : 0px) and (max-width : 767px){
/*Style*/
}

这篇关于如何自动调整所有移动/平板电脑显示格式的div大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！