专栏首页菜鸟前端工程师html+css学习笔记019-H5响应式布局0自适应布局

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

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • html+css学习笔记006-伪类

    Mr. 柳上原
  • html+css学习笔记016-H5变化0过渡0动画

    Mr. 柳上原
  • html+css学习笔记013-阿里图标0iframe

    Mr. 柳上原
  • 如何更优雅的编写CSS代码

    直白的说:编写优秀的 css 代码可能是很痛苦的。很多程序员都不想从事 CSS 开发—我可以做任何事情,除了css以外。

    icepy
  • Dede cms系统迁移中出现的问题

    1 点击后台菜单不显示 解决办法,确保/data/tplcache/下的文件全部迁移过来

    lilugirl
  • VS 2010 OpenGL 配置与实例开发

    首先参考了网上的安装配置环境部分:http://blog.csdn.net/Ididcan/article/details/4490797

    用户4645519
  • Snorkel实战NLP文本分类

    本文是作者一个tweet/微博文本分类实战项目的全程重现与总结。该项目的最大特点是使用了弱监督技术(Snorkel)来获得海量标注数据,同时使用预训练语言模型进...

    用户1408045
  • PHP版本号--phpversion(),PHP_VERSION,PHP_VERSION_ID

    PHP版本号的命名规则 主版本号,次版本号,发布版本号 例如:7.0.12:7指的是主版本号,0是次版本号,12是发布版本号 PHP版本号的获取 1.phpve...

    joshua317
  • 安卓手机与ROS通信遥控Gazebo中仿真机器人小车运动(ROS_indigo)

    --------------------------------------------------------------------------------...

    zhangrelay
  • 专访陈天奇:DMLC发起人与机器学习的故事

    用户1737318

扫码关注云+社区

领取腾讯云代金券