文档章节

响应式开发(3)

sunnyGirl
 sunnyGirl
发布于 2016/11/30 17:06
字数 414
阅读 3
收藏 0

在这里我想写下另外一种方法,其实这些都是基础的知识,可我是初学,所以还是选择一点点积累。

限制只有视口宽度大于800px,才会加载这个文件

<link rel=“stylesheet”media=“screen and (min-width=800px)”href=“800width-screen.css”>

在响应式web设计一书中,作者写到,流式布局就是将传统的固定布局转化成百分比布局,(我不知道以前的表格布局是采用百分比还是固定的,不是很了解,但是根据作者说的好像是采用百分比布局,现在算是回归到以前的布局方式了吗),这里有一个公式。

目标元素宽度%上下文元素宽度=百分比宽度

对了,还有一点就是关于px,em和rem之间的换算。16px=1em 16px=1.6rem   

我勒个去,我还真是不知道媒体查询怎么用的,也没有怎么去研究,头都大啊,因为设置的东西没有效果啊。

<style>
       @media screen and (min-width: 900px) and (max-width: 1080px){
           #para p{
               font-size: 2.5rem;
           }
       }
       @media screen and (min-width: 800px) and (max-width: 900px){
           #para p{
               font-size: 2.2rem;
           }
       }
        @media screen and (min-width: 700px) and (max-width: 800px){
            #para p{
                font-size:1.8rem ;
            }
        }

    </style>
</head>
<body>
<div id="para">
    <p>十年生死两茫茫,不思量,自难忘</p>
    <p>衣带渐宽终不悔,为尹消得人憔悴</p>
</div>

</body>

根据视口的宽度来调节文字的大小,如果视口的范围超出所规定的的媒体查询的范围,字体大小会自动变成默认的,同样当视口的宽度小于所规定的范围,字体大小也会变成默认的。

 

© 著作权归作者所有

共有 人打赏支持
sunnyGirl
粉丝 0
博文 9
码字总数 3863
作品 0
武汉
私信 提问
移动web开发———第三天

一、响应式开发 1、响应式布局, 就是一个网站能够兼容多个终端。 2、响应式开发的原理 CSS3中的Media Query(媒介查询,and之后一定要加空格@media screen and (min-width: 768px) and (max...

我是小谷粒
2018/02/05
0
0
(11)照虎画猫深入理解响应式流规范——响应式Spring的道法术器

本系列文章索引《响应式Spring的道法术器》 前情提要 响应式流 | Reactor 3快速上手 本文源码 2 响应式编程之法 上一章在响应式编程库方面,本着“快速上手”的原则,介绍了响应式流的概念,...

享学IT
2018/06/26
0
0
bootstrap和angular.js技术要求

1、热爱前端,熟练运用JavaScript、HTML5、CSS3等技术,会使用html+div方式实现整体页面风格. 2、具备单页面应用开发经验,特别是AngularJS框架框架使用经验. 3、熟练使用JQuery,bootstrap,...

zhantu
2016/03/24
29
0
全面改革:解读vue3.0的变化

9月30日,尤雨溪在medium个人博客上发布了vue3.0的开发思路,国内有翻译的版本,见文章最后的参考链接。3.0带了了很大的变化,他讲了一些改进的思路以及整个开发流程的规划。 vue3.0的改进思...

凌霄光
2018/10/08
0
0
寻找熟悉bootstrap,angular.js的前端人员【北京】

1、热爱前端,熟练运用JavaScript、HTML5、CSS3等技术,会使用html+div方式实现整体页面风格. 2、具备单页面应用开发经验,特别是AngularJS框架框架使用经验. 3、熟练使用JQuery,bootstrap,...

xulie
2016/03/22
14
8

没有更多内容

加载失败,请刷新页面

加载更多

Linux 命令

#查看系统版本cat /etc/issuecat /etc/redhat-release#yum源库路径/etc/yum.repos.d#更新源yum makecache#解包:tar zxvf FileName.tar#打包:tar czvf FileName...

MrPei
9分钟前
1
0
ZStack——自动化测试系统1:集成测试

测试,对于一个IaaS软件的可靠性、成熟度和可维护性而言,是一个重要的因素.测试在ZStack中是全自动的。这个自动化测试系统包括了三个部分:集成测试,系统测试,基于模块的测试。其中集成测...

ZStack社区版
13分钟前
1
0
springboot 中注入service为空

注意:在Controller中的方法必须用public 参考:spring boot 中使用@Autowired注入服务 服务为空没有注入成功

Skqing
25分钟前
3
0
PyCharm入门教程——IDE概要

PyCharm最新版本下载 JetBrains PyCharm是一种Python IDE,其带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具。此外,该IDE提供了一些高级功能,以用于Django框架下的专业Web...

电池盒
29分钟前
1
0
JVM 知识

一、类加载机制 二、对象的创建的过程 三、JVM内存结构 四、JVM GC 从垃圾回收的角度,由于现在收集器基本都采用分代垃圾收集算法,所以Java堆还可以细分为:新生代和老年代:再细致一点有:...

梦想_与_现实
30分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部