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

问题描述

我设计了一个页面，页面中有四个 div 标签.如果我在手机(5 英寸)上测试页面，它完全适合页面，如果我在平板电脑上测试同一页面，页面适合屏幕的 30%.那么如何设置 div 大小以使其适合所有类型的屏幕.

小提琴链接

HTML:

 
<h3>三个级别 </h3>
<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>播放</button>

请提出任何建议

解决方案

这叫做 响应式 Web 开发 (RWD)).为了使页面响应所有设备，我们需要使用一些基本的基础知识，例如:-

1.在 head 中设置视口元标记:

2.使用 媒体查询.

示例:-

/* 智能手机(纵向和横向)----------- */@media 仅屏幕和(最小设备宽度:320px)和(最大设备宽度:480px){/* 样式 */}/* 智能手机(横向)----------- */@media 仅屏幕和(最小宽度:321px){/* 样式 */}/* 智能手机(人像)----------- */@media 仅屏幕和(最大宽度:320px){/* 样式 */}/* iPad(纵向和横向)----------- */@media 仅屏幕和(最小设备宽度:768px)和(最大设备宽度:1024px){/* 样式 */}/* iPad(横向)----------- */@media 仅屏幕和(最小设备宽度:768px)和(最大设备宽度:1024px)和(方向:风景){/* 样式 */}/* iPad(纵向)----------- */@media 仅屏幕和(最小设备宽度:768px)和(最大设备宽度:1024px)和(方向:纵向){/* 样式 */}/* 台式机和笔记本电脑 ----------- */@media 仅屏幕和(最小宽度:1224px){/* 样式 */}/* 大屏幕 ----------- */@media 仅屏幕和(最小宽度:1824px){/* 样式 */}/* iPhone 4 ----------- */@媒体只有屏幕和(-webkit-min-device-pixel-ratio : 1.5)，只有屏幕和(最小设备像素比:1.5){/* 样式 */}

3.或者我们可以直接使用RWD框架:-

• 引导程序
• Foundation 3 等

一些不错的文章

标准设备的媒体查询 - 作者:CHRIS COYIER

CSS 媒体尺寸

4.大型设备、中型设备和小型设备媒体查询.(在我的场景中工作.)

以下用于通用设备类型的媒体查询: - 大型设备、中型设备和;小型设备.这只是适用于所有场景的基本媒体类型.易于处理的代码，而不是使用各种媒体查询，只需要关心三种媒体类型.

/*###Desktops、大型横向平板电脑和笔记本电脑(大、特大)####*/@media 屏幕和(最小宽度:1024px){/*风格*/}/*###平板电脑(中)###*/@media screen and (min-width : 768px) and (max-width : 1023px){/*风格*/}/*### 智能手机(纵向和横向)(小)### */@media screen and (min-width : 0px) and (max-width : 767px){/*风格*/}

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.

Fiddle link

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>

Any suggestions please,

解决方案

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

1. Set the viewport meta tag in head:

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

2.Use media queries.

Example:-

/* 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. Or we can directly use RWD framework:-

• Bootstrap
• Foundation 3 etc.

Some of good Article

Media Queries for Standard Devices - BY CHRIS COYIER

CSS Media Dimensions

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屋！