响应式web设计体会

响应式web设计的目的:可以使web页面能自动的对设备尺寸进行适配。

响应式web设计的主要方法:使用css的media来查询当前设备的状态,主要的是显示尺寸,然后对不同的尺寸的设备编写不同的css使得web在不同尺寸的情况下显示不同的页面布局,文字大小,图片尺寸等。

在尺寸设置的时候多使用百分比方式。

响应式web的优点:可以使web页面能自动的对设备尺寸进行适配,可以让不同尺寸设备浏览页面时候尽可能显示相同或者合适布局。

响应式web的缺点:响应式web尽可能多的对不同设备进行适配,但是不代表他对所有的设备都是最佳选择,如果想要让web在不同设备显示最佳效果还是需要针对具体设备定制开发。

响应式web设计这里要推荐一本书《响应式Web设计:HTML5和CSS3实战》,书里对响应式web设计有比较详细的说明。

下面举个例子简单说明一下响应式的原理

css.css

ul{list-style: none;}
ul li{float: left; padding-right: 100px;}
@media screen and (max-width:500px){
    ul li{background-color: red;}
}

jsp页面

<%@page contentType="text/html" pageEncoding="GBK" %>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="css.css"/>
        <title>DIV+CSS布局多行多列</title>
        
    </head>
    <body>
        <ul>
            <li>first item</li>
            <li>second item</li>
            <li>third item</li>
            <li>fourth item</li>
        </ul>
    </body>
</html>
在显示屏宽度为500px以上的时候ul列表显示横向的布局,而media中写了当显示屏宽度小于500px时ul列表纵向显示背景为红色

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值