【CSS框架】PRUE实现自适应和响应式

什么是响应式和自适应?

1、响应式:样式会随着屏幕大小改变,同一页面设备不同样式不同
2、自适应:不管屏幕大小,页面的样式比例不变

响应式和自适应怎么布局?

在css3之前无从谈起响应式和自适应
Css3怎么做到的呢?(我知道的几种)
1、媒体查询
2、运用百分比布局
3、rem
4、css框架(Bootstrap、jQuery Mobile、Pure……)
1、媒体查询
      @media all and (屏幕宽度){
                                样式表
                              }
2、运用百分比布局
       width:100%;
3、rem
       body{font-size:62%;}
4、css框架(Bootstrap、jQuery Mobile、Pure……)
        具体谈论下pure
Pure:纯净的,干净的。
Pure是来自雅虎的。
尽管从UI界面效果上来说,Pure没有Bootstrap那样精美,
但Pure是纯CSS实现的,因此非常小巧,整个框架压缩后只有5.7k左右(保守的)。

Pure特点:

1、最大的特点就是框架基于纯CSS,无任何JavaScript代码,
   渲染速度比较快。
2、由Yahoo出品,技术上应该不存在太大问题。
3、框架十分小巧,压缩后仅5.7k。
4、组件也很丰富,包括表格、表单、按钮、导航等。
5、CSS类的标识十分简单,因此在使用Pure的过程中代码会比较友好。
6、只提供布局,没有多余的样式阻碍

Pure网址:https://purecss.cn/

时间: 2024-12-29 23:43:39

【CSS框架】PRUE实现自适应和响应式的相关文章

bootstrap自适应和响应式布局的区别

自适应:  不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: bootstrap是依赖jquery的,使用时先装上jquery. Boostrap的“栅栏”模式 Boostrap自适应功能的基础就是“栅栏"模式,它是将浏览器以行列形式去划分:一共12列,行数自定义,根据你所要显示的元素,确定每个元素显示的大小即需要的列数,如果超过范围,就会自动转行.每列的大小是Bo

自适应和响应式区别以及写法

自适应: 在不同分辨率下不同设备上显示相同的页面.即:根据屏幕的宽度,自动调节网页内容的大小,使其主体内容和布局不变. 响应式: 响应式的概念应该是覆盖了自适应,但是包括的东西更多了.响应式布局可以根据屏幕的大小自动的调整页面的展现方式,以及布局. (1)允许网页的宽度自动的调整 (2)尽量少使用绝对的宽度,多点百分比 (3)相对大小的字体:字体不要使用px写死,最好使用相对大小的em,或者高清方案rem,这个不限制与字体,别的属性也可以这么设置 (4)流式布局,float等float的好处是,

自适应和响应式布局的区别,em与rem

自适应布局:不同终端上显示的文字,图片,等位置排版都是一样的,只是大小不同. 响应式布局:通过媒体查询监听屏幕大小的变化,做出响应式的改变,在不同设备可能展现不同的样式效果. em:是相对其父元素的. rem:相对于页面根元素,推荐使用rem. 原文地址:https://www.cnblogs.com/ZM-ONE/p/8969046.html

吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:响应式表格

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 响应式表格</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css&

吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片:响应式图片

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"

第一篇、自定义博客园的css样式并让其支持响应式

css文件: <style type="text/css"> #cnblogs_post_body { color: black; font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif; font-size: 16px; } #cnblogs_post_body h1 { background: #2B6695; border-radius: 6px

常用响应式 Web UI 框架

1. Bootstrap Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等.官方网站: http://twitter.github.com/bootstrap/github: https://github.com/twitter/bootstrap 2. Foundation Foundation 是一个易用.强大而且灵活的框架,用于构建基于任何设备上的 W

html5/css3响应式页面开发总结

一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会带来兼容各种设备工作量大.代码累赘.加载时间长的缺点,但它们跨平台和终端,能"一次设计,普遍适用",可以根据屏幕分辨率自适应以及自动缩放图片.自动调整布局,它们不只是技术的实现,更多的是对于设计的全新思维模式. 很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile

响应式和自适应的区别

玩前端也有几个月了,发现大家普遍混淆了响应式和自适应的概念.先给大家体验一下响应式和自适应的区别,请放大缩小一下屏幕尝试 自适应的体验http://m.ctrip.com/html5/  响应式的体验 http://segmentfault.com/ 整理了几篇自适应和响应式的文章,摘抄并修改了一下,请大家欣赏: 起初,网页设计者都会设计固定宽度的页面,最开始的电脑显示器分辨率种类不多,因为当时电脑本来就少,即使有变化也是 800 850 870 880.比如 开源中国的网页就是固定宽度为998