HTML响应式布局

| |
[不指定 2019/07/29 10:06 | by 吕进 ]
120x120
出现背景:比如,篇幅很长的文章在手机端预览时,会出现很长的横向滚动条。
基本定义:为不同终端的用户提供更加舒适的界面和更好的用户体验。简而言之,就是一个网站能够兼容多个终端。
根本宗旨:写一次代码,跑在一万种设备上
核心思想:不就是设置宽度么?
实现方式:根据不同设备,设置不同CSS样式,设置该设备支持的页面宽(高)。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>响应式布局</title>    
    <!--
      当设备最大宽度大于480px时,按不同的设备宽度使用不同的样式
      即:设备宽度在480px以内时,使用移动端样式,mobile样式
    -->
    <link rel="stylesheet" href="css/pc.css" media="only screen and (min-width:1200px)"/>
    <link rel="stylesheet" href="css/pc_zd.css" media="only screen and (min-width:980px) and (max-width:1199px)"/>
    <link rel="stylesheet" href="css/pad.css" media="only screen and (min-width:768px) and (max-width:979px)"/>
    <link rel="stylesheet" href="css/shouji.css" media="only screen and (min-width:480px) and (max-width:767px)"/>
    <link rel="stylesheet" href="css/mobile.css" media="only screen and (max-width:479px)"/>
</head>

<body ondragstart="return false" oncontextmenu="return false" onselectstart="return false">
    <div>
      <p>
      响应式布局
      </p>
    </div>
  <div></div><div></div><div></div></body>
</html>

在设置时,需要注意设置顺序,如
@media screen and (min-width:1200px)
@media screen and (min-width:980px)
@media screen and (min-width:768px)
@media screen and (min-width:480px)
@media screen and (max-width:479px)
否则,后面的会覆盖前面的样式。

  • 中查看更多 HTML响应式布局 相关内容
  • 中查看更多 HTML响应式布局 相关内容
  • 中查看更多 HTML响应式布局 相关内容
  • 中查看更多 HTML响应式布局 相关内容
  • Tags:
    互联故事 » 代码资源 | 评论(0) | 引用(0) | 阅读(853)

    表情
    emotemotemotemotemot
    emotemotemotemotemot
    emotemotemotemotemot
    emotemotemotemotemot
    emotemotemotemotemot
    打开HTML
    打开UBB
    打开表情
    隐藏
    记住我
    昵称   密码   游客无需密码
    网址   电邮   [注册]