美文网首页我爱编程菜鸟前端工程师
html+css学习笔记019-H5响应式布局0自适应布局

html+css学习笔记019-H5响应式布局0自适应布局

作者: Mr柳上原 | 来源:发表于2018-06-13 11:40 被阅读3次

    Author:Mr.柳上原

    • 付出不亚于任何的努力
    • 愿我们所有的努力,都不会被生活辜负
    • 不忘初心,方得始终

    html+css布局

    前端学习的基础

    html+css毕业已经有两个星期

    现在原生js班学习也有一个多星期了

    这是不包含需要用到js的最后一节学习笔记

    感慨颇多

    笔到纸上却一个字也写不出来

    希望自己在js的学习上也能做到不忘初心

    付出不亚于任何人的努力

    天生我才必有用,千金散尽还复来

    我会发上来我做的京东商城的html+css静态代码

    算是对html+css学习的一个肯定和总结吧

    因为并没有想要去刻意的做成教程或类似的东西

    初衷仅仅是想等以后回过头来

    看看自己曾经为之努力过的事情

    所以这些笔记都是根据老师的讲解

    自己的使用习惯编写的

    如果有同样在学习前端的路上努力的同窗有什么疑问

    我会不吝赐教,共同进步

    然后

    下次会把js学习笔记一步步发布上来

    <!DOCTYPE html> <!-- 文档类型:标准html文档 -->
    
    <html lang='en'> <!-- html根标签 翻译文字:英文 -->
    
    <head> <!-- 网页头部 -->
    
    <meat charset='UTF-8'/> <!-- 网页字符编码 -->
    
    <meat name='Keywords' content='关键词1,关键词2'/>
    
    <meat name='Description' content='网站说明'/>
    
    <meat name='Author' content='作者'/>
    
    <title>前端59期学员作业</title> <!-- 网页标题 -->
    
    <meat name='viewport' content='width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1 user-scalable=no'> <!-- 自适应布局 -->
    viewport 移动端视口调整
    width=device-width 宽度等于设备宽度
    height=device-height 高度等于设备高度
     initial-scale 初始比例
    minimum-scale 允许缩放的最小比例
    maximum-scale 允许缩放的最大比例
    user-scalable 是否允许缩放
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 自适应兼容方法 -->
    
    <link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
    
    <style type='text/css'> /*内部样式表*/
    
    /* 响应式布局 */
    @import url('./css/css.css') screen and (min-width:500px) and (max-width:800px); /* 响应式布局内部样式表引用方式:不推荐 */
    
    .box{
    width:200px;
    height:200px;
    background-color:red;
    }
    @media screen and (min-width:500px) and (max-width:800px){ /* 
    media 媒体查询
    媒体类型:
    all 所有
    screen 彩屏设备
    print 用于打印机和打印预览
    speech 用于屏幕阅读器等发声设备
    关键词:
    not 不是
    and 和(前后必须空格隔开)
    only 只有
    媒体特性:
    width
    height
    min-width
    max-width
    orientation:portrait; /* 竖屏:宽度小于高度 */
    orientation:landscape; /* 横屏:宽度大于高度 */
     */
    .box{
    width:300px;
    height:300px;
    background-color:green;
    }
    }
    
    /* 自适应布局 */
    html{
    font-size:100px; /* rem=100px */
    }
    div{
    width:1rem;
    height:1rem;
    background-color:red;
    }
    
    </style>
    <link rel='stylesheet' type='text/css' href='./css/css.css' media='screen and (min-width:500px) and (max-width:800px)'/> <!-- 响应式布局外链样式表引入方法 -->
    
    </head>
    
    <body> <!-- 网页主干:可视化区域 -->
    
    <div class='box'> </div> <!-- 块标签-->
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    <script>
        var html = document.querySelector('html');
        changeRem();
        //添加resize事件
        window.addEventListener('resize',changeRem);
        function changeRem() {
            //获取设备宽度
            var width = html.getBoundingClientRect().width;
            //console.log( width );
            html.style.fontSize = width/10+ 'px';
        }
    </script> <!-- 自适应布局js控制代码 -->
    </body>
    
    </html>
    

    相关文章

      网友评论

        本文标题:html+css学习笔记019-H5响应式布局0自适应布局

        本文链接:https://www.haomeiwen.com/subject/zacjeftx.html