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 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

轮播图也就是看看而已,确实越来越少的网站,采用轮播图了

轮播图,图片旋转器,滑片,无论你怎么叫这玩意,它在网络上无处不在。轮播图在电商网站主页上广泛应用,大多数电商网站的主页上都有它: ? 但轮播图对用户真的有意义吗...

46270
来自专栏程序员的诗和远方

20180728_ARTS_week05

这题有点犯难,上面是 Discuss 中的一个解法,看了之后挺好理解的,要找回环字符串,就从 a 和 aa 一阶和二阶这两种形式往两边找,感觉特别巧妙。

10520
来自专栏IT大咖说

从UI到AI——移动端H5生成技术漫谈

15150
来自专栏GIS讲堂

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)

同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow。

17030
来自专栏星回的实验室

CSS居中方法集锦

这阵一直忙各路笔试面试,心越来越浮躁,也好久没有写些东西。不过也正是这些虐我千百遍的笔试面试题让我愈发地觉得确有必要整理一下知识点,让网上书上看的杂乱无章的东西...

11610
来自专栏Rindew的iOS技术分享

细数这几年我碰到过的iOS车轮

24350
来自专栏Golang语言社区

【Golang语言社区】H5游戏开发--从零开始开发一款H5小游戏(二) 创造游戏世界,启动发条

上一节介绍了canvas的基础用法,了解了游戏开发所要用到的API。这篇文章开始,我将介绍怎么运用这些API来完成各种各样的游戏效果。这个过程更重要的是参透一些...

40330
来自专栏Coding迪斯尼

寿司快卖:实现游戏主流程--制作寿司和客户显示动画特效

上一节我们搭建了游戏的基本框架。游戏界面被分为若干个板块,其中一个板块显示了各种制作寿司的材料,它的目的是用于玩家根据信息组装各种寿司,本节我们进入游戏的主流程...

8830
来自专栏前端小作坊

中文排版二三事

前段时间一直在折腾中文排版相关的事情,自认为结果还算不错。故开源之,即是Entry.css。这是一个可配置的、更适合阅读的中文文章样式库,可以用来快速搭建中文博...

9910
来自专栏九彩拼盘的叨叨叨

《写给大家看的设计书》摘要与总结

该书适合完全没有设计背景,或在设计方面没有经过正规培训的人。 该书的描述浅显易懂,并且配有很多插图来做描述的说明。阅读起来觉得很轻松。

8130

扫码关注云+社区

领取腾讯云代金券