文档章节

响应式开发(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
全面改革:解读vue3.0的变化

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

凌霄光
10/08
0
0
响应式方案调研及前端开发管理思考

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

浩瀚动酷
06/27
0
0
bootstrap和angular.js技术要求

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

zhantu
2016/03/24
29
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS 安装PHP5和PHP7

安装PHP5 下载解压二进制包 [root@test-a src]# cd /usr/local/src/[root@test-a src]# wget http://cn2.php.net/distributions/php-5.6.32.tar.bz2[root@test-a src]# tar jxvf php-5.6......

野雪球
今天
4
0
windows上类似dnsmasq的软件Dual DHCP DNS Server

官网地址:http://dhcp-dns-server.sourceforge.net/官网定向的下载地址:https://sourceforge.net/projects/dhcp-dns-server/files/ 设置参考地址:http://blog.51cto.com/zhukeqiang/18264......

xueyuse0012
今天
3
0
LinkedHashMap源码解析

前言 HashMap中的元素时无序的,也就是说遍历HashMap的时候,顺序和放入的顺序是不一样的。 如果需要有序的Map,就可以采用LinkedHashMap. LinkedHashMap通过维护一个包含所有元素的双向链表,...

grace_233
今天
3
0
初识flask

文档 0.10.1版本 http://www.pythondoc.com/flask/index.html 1.0.2版本 https://dormousehole.readthedocs.io/en/latest/ 安装flask $ pip3 install flaskCollecting flask Downloading......

yimingkeji
昨天
5
0
Akka系统《sixteen》译

Actor是一个封装状态(state)和行为(behavior)的对象,它们只通过交换消息通信(放入收件人邮箱的邮件)。从某种意义上说,Actor是最严格的面向对象编程形式,但它更适合将他们视为人:在与Act...

woshixin
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部