屏幕尺寸自适应

一、index 首页布局

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>
<div id="content">
<nav>导航栏</nav>

</div>
</body>
</html>

二、样式

/** 屏幕尺寸 700px+270px+5+5=980px;
*
*/
#content{
width:980px;
margin:0 auto;
background-color:#666;

}

section{
width:700px;
float:left;
background-color:blue;
}

aside{
width:270px;
padding-left:5px;
padding-right:5px;
float:left;
background-color:yellow;
}

/*
*@media only screen 表示下面的css 针对屏幕有效果
*/
/**
* and (max-width:700px) 当屏幕分辨率最大为767px时下面的css起作用
*/

@media only screen and (max-width:767px){ /*and 后空格一定要*/
section{
min-width:100%;
}
aside{
min-width:100%;
}

}

完整代码，HTML 、css 都需要放上去

原文地址：https://www.cnblogs.com/lszw/p/11015416.html

时间： 2024-10-28 23:50:50

屏幕尺寸自适应的相关文章

移动端屏幕尺寸自适应

1 var metaEl = document.querySelector('meta[name="viewport"]'); 2 var scale; 3 scale = document.documentElement.clientWidth / 320; 4 metaEl.setAttribute("content", "width=320,initial-scale=" + scale + ",maximum-scale=&qu

NGUI之UIRoot屏幕分辨率自适应

来自:http://blog.csdn.net/oneRain88/article/details/11713299 NGUI在Unity3D游戏开发中非常常用,而NGUI对于每一个UI场景,都是以一个UIRoot为UI游戏对象树的根的,那么这个UIRoot是起什么作用的呢? 先简单看一下UIRoot中的基本属性 UIRoot游戏对象的属性只有4个,分别是缩放规则,手动高度,最小高度和最大高度而正是这4个属性,将影响整个UI场景中整体的缩放比例,当设置好这4个属性之后,UIRoot游戏对象的相

iPhone屏幕尺寸、分辨率及适配

目录(?)[+] 1.iPhone尺寸规格设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2.4 inches (62.1 mm) 4.5 inches (115.5 mm) 3.5-inch 320x480 @1x 320x480 163 4(s) 2.31 inches (58.6 mm) 4.5 inches (115.2 mm) 3.5-inch 320x480

iosiPhone屏幕尺寸、分辨率及适配

iosiPhone屏幕尺寸.分辨率及适配 1.iPhone尺寸规格设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2.4 inches (62.1 mm) 4.5 inches (115.5 mm) 3.5-inch 320x480 @1x 320x480 163 4(s) 2.31 inches (58.6 mm) 4.5 inches (115.2 mm) 3.5-

【转】iPhone屏幕尺寸、分辨率及适配

原文网址:http://blog.csdn.net/phunxm/article/details/42174937 1.iPhone尺寸规格设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2.4 inches (62.1 mm) 4.5 inches (115.5 mm) 3.5-inch 320x480 @1x 320x480 163 4(s) 2.31 inches

Android平板上开发应用的一点心得——精确适配不同的dpi和屏幕尺寸

一.引言 Android的开源使厂商无需自行研发OS,大大降低了研发.生产的成本,使得Android平板品牌如雨后春笋般爆发,山寨机厂商们似乎又找到了一丝希望.与此同时带来的是广大开发者的苦不堪言,各种神奇的小板儿考验着app的兼容性,各种定制的rom不经意间就让app崩溃,光是界面上的调整就已经够你喝一壶了,是不? 二.适配可行性早在Android设计之初就考虑到了这一点,为了让app适应标准or山寨屏幕,google已经有一套成熟的解决方案.其中,有这么几个指标需要注意: (1)屏幕尺寸:

Unity3D开发（一）：NGUI之UIRoot屏幕分辨率自适应

原地址:http://blog.csdn.net/onerain88/article/details/11713299 NGUI在Unity3D游戏开发中非常常用,而NGUI对于每一个UI场景,都是以一个UIRoot为UI游戏对象树的根的,那么这个UIRoot是起什么作用的呢? 先简单看一下UIRoot中的基本属性 UIRoot游戏对象的属性只有4个,分别是缩放规则,手动高度,最小高度和最大高度而正是这4个属性,将影响整个UI场景中整体的缩放比例,当设置好这4个属性之后,UIRoot游戏对象的

Android不同手机屏幕分辨率自适应【转】

有必要了解的 Android中常见的单位 dip, dp, px, sp之间的区别: dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这个,不依赖像素.px: pixels(像素). 不同设备显示效果相同,一般我们HVGA代表320x480像素,这个用的比较多.pt: point,是一个标准的长度单位,1pt＝1/72英寸,用于印刷业,非常简单易用:sp: scal

转： iPhone屏幕尺寸、分辨率及适配

1.iPhone尺寸规格设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2.4 inches (62.1 mm) 4.5 inches (115.5 mm) 3.5-inch 320x480 @1x 320x480 163 4(s) 2.31 inches (58.6 mm) 4.5 inches (115.2 mm) 3.5-inch 320x480 @2x 640x

屏幕尺寸 自适应

屏幕尺寸 自适应的相关文章

屏幕尺寸自适应

屏幕尺寸自适应的相关文章