文档章节

响应式开发(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...

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

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

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

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

zhantu
2016/03/24
29
0
响应式方案调研及前端开发管理思考

网易首页响应式风格实现技术调研 网易首页实现页面(字体)响应式风格的方式是在不同尺寸的视口中使用不同的容器类,如图 1所示。当视口大于等于1420px时,使用大尺寸容器类 (index20171200...

浩瀚动酷
06/27
0
0
2014 年 15 款最棒的 HTML&CSS 框架

现在,我们来介绍 2014 年推荐给 Web 设计师的 15 款 HTML&CSS 框架。阅读下面的框架列表,跟我们分享你的看法吧:) CSS 框架 1) Toast Toast 是一款让所有设计都尽可能简单的 CSS 框架,但...

oschina
2014/01/15
16.7K
28

没有更多内容

加载失败,请刷新页面

加载更多

70.shell的函数 数组 告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析 20.16/20.17 shell中的函数: ~1. 函数就是把一段代码整理到了一个小单元中,并给这个小单元起一个名字,当用到这段...

王鑫linux
今天
2
0
分布式框架spring-session实现session一致性使用问题

前言:项目中使用到spring-session来缓存用户信息,保证服务之间session一致性,但是获取session信息为什么不能再服务层获取? 一、spring-session实现session一致性方式 用户每一次请求都会...

WALK_MAN
今天
5
0
C++ yield()与sleep_for()

C++11 标准库提供了yield()和sleep_for()两个方法。 (1)std::this_thread::yield(): 线程调用该方法时,主动让出CPU,并且不参与CPU的本次调度,从而让其他线程有机会运行。在后续的调度周...

yepanl
今天
4
0
Java并发编程实战(chapter_3)(线程池ThreadPoolExecutor源码分析)

这个系列一直没再写,很多原因,中间经历了换工作,熟悉项目,熟悉新团队等等一系列的事情。并发课题对于Java来说是一个又重要又难的一大块,除非气定神闲、精力满满,否则我本身是不敢随便写...

心中的理想乡
今天
35
0
shell学习之获取用户的输入命令read

在运行脚本的时候,命令行参数是可以传入参数,还有就是在脚本运行过程中需要用户输入参数,比如你想要在脚本运行时问个问题,并等待运行脚本的人来回答。bash shell为此提 供了read命令。 ...

woshixin
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部