移动Web - 响应式布局开篇
2024-08-30 01:17:30
用到的工具：
- FireFox浏览器
- Sublime Text 2
响应式布局定义：
2010年，Ethan Marcotte提出，可查看原文；
通俗地讲就是：百份比布局，根据不同设备显示不同布局；
这次主要解决：传统的固定像数(px)相比：
- 不同显示设备，使用不同布局。例如：PC屏幕，显示3栏；手机，显示为1栏；用到media query(媒体查询)，它的用法，例如：
- @media screen and (min-width: 481px) ：屏幕最小481px，即大于481px适用；
- @media screen and (max-width: 480px) ：屏幕最大480px，即小于480px适用；
- @media print and (monochrome)：打印机，黑白，适用；
- 宽度使用百份比，横屏与竖屏会自动伸缩；
先看看原始素材的效果，原始素材下载：
PC屏幕，3栏显示如下：
手机屏，显示不全：
先看看html的结构：
CSS里对应使用固定像数，这为了简单，只关注布局相关的CSS:
实现PC显示3栏，手机显示1栏的CSS：
.header {
background:url(images/w.png) no-repeat;
height: 200px;
}
.navigation {
min-height: 25px;
}
.header, .navigation, .footer {
clear: both;
}
@media screen and (min-width: 481px)
{
body, .header, .navigation, .footer {
width: 960px;
}
.column {
margin: 10px 10px 0 0;
}
.navigation ul li {
width: 320px; /* 960/3 */
}
#visit {
width: 240px;
float: left;
}
#points {
width: 240px;
float: right;
}
#main {
margin: 10px 260px 0 250px;
width: 460px;
}
}
@media screen and (max-width: 480px)
{
body, .header, .navigation, .footer {
width: 320px;
}
.column {
margin: 10px 0;
/*红色分割线*/
border-bottom: 1px dashed red;
}
.navigation ul li {
width: 106.67px; /* 320/3 */
}
#visit,#points,#main {
width: 320px;
}
}
PC显示效果没变；
手机显示效果，变为了1栏，竖向滚动，这就是移动Web开始。
这里出现了横向滚动条，因为图片撑大了。
最后一步，将里面的宽度像数转为百份比，并控制图片大小不撑大父元素：
.header {
background:url(images/w.png) no-repeat;
height: 200px;
}
.navigation {
min-height: 25px;
}
.header, .navigation, .footer {
clear: both;
}
@media screen and (min-width: 481px)
{
body, .header, .navigation, .footer {
width: 100%;
}
.column {
margin: 10px 1.042% 0 0;
}
.navigation ul li {
width: 33.33%; /* 960/3 */
}
#visit {
width: 25%;
float: left;
}
#points {
width: 25%;
float: right;
}
#main {
margin: 10px 27.083% 0 26.042%;
width: 47.92%;
}
}
@media screen and (max-width: 480px)
{
body, .header, .navigation, .footer {
width: 100%;
}
.column {
margin: 10px 0;
border-bottom: 1px dashed red;
}
.navigation ul li {
width: 33.33%; /* 320/3 */
}
#visit,#points,#main {
width: 100%;
}
}
img, object{
max-width: 100%;
}
手机横屏效果：
全文完！
最新文章
- Java EE之一个表单两个按钮响应不同界面（登录与注册）
- uploadfile图片上传和ashx
- js实现图片的淡入淡出
- Hibernate-org.hibernate.QueryException: could not resolve property: code of:
- Know How To Use Check Box Mapping Of Other Values Property In Oracle Forms
- 干掉拖延症！写给新人的GTD方法
- linux 打补丁
- ASSERT_VALID和ASSERT宏分析
- MATLAB的符号运算基础
- js华氏度转为摄氏度
- EnCase missed some usb activities in the evidence files
- java-FFmpeg（一） 实现视频的转码和截图功能
- java 反射简说
- s11 Docker+DevOps实战--过程和工具
- Python的字典dict和set
- 安装routeos
- CVPR2019 | Mask Scoring R-CNN 论文解读
- 【转载】linux 测试机器端口连通性方法
- 使用对象作为hashMap的键，需要覆盖hashcode和equals方法
- 20155237 《Java程序设计》实验一（Java开发环境的熟悉）实验报告