媒体查询_REM

来源：互联网发布：java明日潘多拉编辑：程序博客网时间：2024/05/29 10:06

媒体查询

媒体查询，在最外层一个div1 width:800px 加border效果在div的内部有内容，内容的宽为100%，@media only screen and (max-width: 960px) {#div1 {    width: 100%;}当移动网站的手内容width：100%开始寻找父级宽度，此时父级的宽度不再是800px了，而是100%,感觉收获很大。

H5新增的语义标签

    <!--头--><header></header> <!--=--> <div id="header"></div>        <!--导航--><nav></nav> <!--=--> <div id="nav"></div>        <!--在文档中插入图片，并且带上一个标题-->        <figure>            <img src="../03练习/03老张律师网/img/002.jpg"/>            <figcaption style="width: 200px;">                扫描二维码登录微信. 登录手机微信.                 进入“扫一扫”，扫码登录微信网页版. 扫描成功.                 请在手机上点击确认以登录.            </figcaption>                   </figure>        <!--提示：<aside> 的内容可用作文章的侧栏。-->        <aside>我是aside</aside>              <footer>我是footer</footer> = <div id="footer"></div>        <!--段落  h1 p-->        <section>            <h1>WWF's Panda symbol</h1>            <p>                The well-known panda logo of WWF                 originated from a panda named Chi                 Chi that was transferred from                 Zoo in the same year of the                  establishment of WWF.            </p>        </section>        <article>          <h1>What Does WWF Do?</h1>          <p>                The well-known panda logo of WWF                 originated from a panda named Chi                 Chi that was transferred from                 Zoo in the same year of the                  establishment of WWF.          </p>        </article>        <input list="big" />        <datalist id="big">            <optgroup value="2">                <option value="第一"></option>                <option value="第二"></option>                <option value="第三"></option>                <option value="第四"></option>                <option value="第五"></option>            </optgroup>        </datalist>

画布

<canvas id="" width="" height="">    您的浏览器不兼容    <a href="###">浏览器下载链接</a></canvas><!--mp4可以，其他有视频格式限制--><video src="1.mp4"controls="controls" ></video><audio src="1.mp3" autoplay="autoplay" ></audio>[H5新增input 类型]

流式布局

/*内间距padding的值设置成百分比，相对于其父元素的 width 的百分比padding加在main上，它的百分比需要参照body来看padding-left:（10%  * body的宽）即使设置的top和bottom的值，也是根据父级的宽来计算的margin和padding类似，都是跟父级的width有关 * */<!--    流式布局采用的都是百分比的方式设置宽高，    如果没有设置，html和body的默认高度默认值是0，    但是给body加上背景颜色，还能铺满全屏，碰到这种情况，    需要先给body和html设置好高度    界面中的width,height,margin,padding的数值都是百分比，    但是注意，border的值不能用百分比，而且不要忘记写    html,body[height:100%]    有三种情况：    1.背景图尺寸要用background-size:100%     2.结构高度都使用百分比    3.文字内容:rem    1em = 16px-->

选择器

/*子代选择器  h1 > strong {color:red;}  后代选择器  h1 em {color:red;}*//*选择main中的第一个孩子#main :first-child{  width: 49.25%;  height: 185px;  background: palevioletred;}*/#main :nth-child(1){   选择main中的第一个孩子    width: 49.25%;    height: 185px;    background: palevioletred;}#main :nth-child(2){   选择main中的第二个孩子    width: 24%;    height: 80px;    background: red;}----------ul有空格  li 无空格  两者选择的相同，一般以方式一最为正确方式一：ul li:nth-child(5){    font-size: 32px;}方式二：ul :nth-child(5){    font-size: 32px;}方式三：li:nth-child(5){    font-size: 32px;}<ul>    <li>你好——1</li>    <li>你好——2</li></ul>

媒体查询小例子

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title>     <style type="text/css">         body{/*background: yellow;*/}/*用@media修饰的就是媒体查询的部分only screen 只有屏幕，也可以使用all，所有设备 and 连接条件 * */@media only screen and (min-width:1024px ) {body{background: green;}div{display: none;}}@media only screen and (min-width:960px ) and (max-width:1024px ){body{background: red;  /*1024red*/}div{display: block;}}@media only screen and (max-width:960px ) {body{background: gray;}}     </style></head>    <body>        <div id="div1">我是DIV</div>    </body></html><!--    媒体查询：可以检测屏幕尺寸的变化，    实现不同的尺寸屏幕对应不同样式的代码效果，    也可以检测移动设备的横屏，从而实现竖屏一套效果，横屏一套效果    写的位置要在常规样式的最下面写    @media only screen / all and (条件) and （条件){        对应屏幕尺寸的CSS    }    响应式网站：流式布局 + 媒体查询-->

REM

/*设置div宽的最大值*/max-width: 1180px;

如果没有做具体设置，字体默认大小16px如果没设置  1em = 16px  0.625em  = 10pxem是一个相对的长度单位，不是固定的，em会继承父级元素字体的大小body{font-size: 62.5%;}div{font-size: 1em;}rem: root em 也是一个相对的长度单位，它是CSS3引入的，他相对的是HTML的根元素，也就是HTML标签，避免了逐层的设置设置宽高，字体大小, 一般会给html或者父级设置font-size:62.5%,因为16px*0.625=10px ，在网页中div 1rem = 10px   这样方便我们计算body{   div{   }   }

30个最常用css选择器解析
怎么使用Animate

0 0