viewport

Bootstrap

由 China☆狼群 提交于 2020-01-15 23:09:15
Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的一套前端工具包。 它支持响应式布局，并且在V3版本之后坚持移动设备优先。 为什么要使用Bootstrap？ 在Bootstrap出现之前： 命名：重复、复杂、无意义（想个名字费劲） 样式：重复、冗余、不规范、不和谐 页面：错乱、不规范、不和谐 在使用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。 Bootstrap下载 官方地址：https://getbootstrap.com 中文地址：http://www.bootcss.com/ 我们使用V3版本的Bootstrap，我们下载的是用于生产环境的Bootstrap。 Bootstrap环境搭建 目录结构： bootstrap-3.3.7-dist/ ├── css // CSS文件 │ ├── bootstrap-theme.css // Bootstrap主题样式文件 │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css // 主题相关样式压缩文件 │ ├── bootstrap-theme.min.css.map │ ├── bootstrap.css │ ├──

CSS3自适应字体大小(vw vh)

由 ﹥＞﹥吖頭↗ 提交于 2020-01-15 15:47:10
viewpoint css3提供了一些与当前viewpoint相关的元素，vw，vh，vmin, vmax等。 “viewpoint” = window size vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, 最小 1vmax = 1vw or 1vh, 最大 兼容性：chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+ DEMO地址： http://qianduannotes.sinaapp.com/test/fontResize.html （已经用JS修正重绘bug） <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Demo</title> <style type="text/css"> #box { font-size: 4vw;} </style> </head> <body> <div id="box"> 我是靖鸣君 我是靖鸣君 我是靖鸣君 </div> </body> </html> 但是该方案存在一个bug，上面的代码，当浏览器窗口变化的时候，box中的文字并没有按照应有的比例变化，但是css3标准中是这么说的： When the height or

Measuring the window offset

由 心已入冬 提交于 2020-01-14 22:53:47
问题 Is there a way to measure the offset of the window in jQuery, in order than I might compare the positions of a 'fixed' element and a relatively positioned one? I need to be able to tell how far the window is scrolled so I can use the figure to calculate the difference between the height of the fixed element (which is relative to the viewport top) and the relative object (which is relative to the top of the document) 回答1: $(window).scrollTop() and $(window).scrollLeft() can be used to find

Scale HTML content using JQuery Mobile & Phonegap

由 拟墨画扇 提交于 2020-01-14 14:16:10
问题 I need to dynamically load content from HTML emails into some type of content area within my HTML so that it is scaled to fit, exactly the way the native mail apps do for iPhone/Android. I have spent two days Googling and testing to no avail. I'm loading the HTML content (which is often set to width=600 or something nice), but rather than scaling, it is appearing as follows: iPhone Simulator Example The HTML is very simple: <div data-role="page" id="messagedetailpage" data-add-back-btn="true"

Scale HTML content using JQuery Mobile & Phonegap

由 一曲冷凌霜 提交于 2020-01-14 14:15:51
问题 I need to dynamically load content from HTML emails into some type of content area within my HTML so that it is scaled to fit, exactly the way the native mail apps do for iPhone/Android. I have spent two days Googling and testing to no avail. I'm loading the HTML content (which is often set to width=600 or something nice), but rather than scaling, it is appearing as follows: iPhone Simulator Example The HTML is very simple: <div data-role="page" id="messagedetailpage" data-add-back-btn="true"

How do I scroll JScrollPane viewport containing a JPanel to a specific location

由 吃可爱长大的小学妹 提交于 2020-01-14 10:23:41
问题 I am trying to create a large game board that only part of it will be visible in the viewport and would like to be able to move the viewport around using the arrow keys to see the whole board. Right now I have a JScrollPane that contains a JPanel that will have Images and text and other stuff, but those are irrelevant. Right now I have an ImageIcon at the same size as the JPanel as a background and I would like to have an option to move the viewport around by using keys, and not have any

How do I scroll JScrollPane viewport containing a JPanel to a specific location

由 拈花ヽ惹草 提交于 2020-01-14 10:23:31
问题 I am trying to create a large game board that only part of it will be visible in the viewport and would like to be able to move the viewport around using the arrow keys to see the whole board. Right now I have a JScrollPane that contains a JPanel that will have Images and text and other stuff, but those are irrelevant. Right now I have an ImageIcon at the same size as the JPanel as a background and I would like to have an option to move the viewport around by using keys, and not have any

BootStrap常用组件及响应式开发

由 佐手、 提交于 2020-01-14 04:22:37
BootStrap常用组件 PS:所有的代码必须写在<class="container/container-fluid">容器当中 常用组件包含内容: 字体图标 下拉菜单 按钮组 输入框俎 导航 分页 标签和徽章 页头 缩率图 进度条 进度条示例： var $d1 = $("#d1"); var width = 0; var theID = setInterval(setValue, 200); function setValue() { if (width === 100) { clearInterval(theID); } else { width++; $d1.css("width", width+"%").text(width+"%"); } } 响应式开发 为什么要进行响应式开发？ 随着移动设备的流行，网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。 什么是响应式？ 利用媒体查询，让同一个网站兼容不同的终端（PC端、移动端）呈现不同的页面布局。 用到的技术： CSS3@media查询 用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。 常见属性： device-width, device-height 屏幕宽、高 width,height 渲染窗口宽、高 orientation

Get div to show/hide when scrolling for a “back to top” link

由 我只是一个虾纸丫 提交于 2020-01-12 08:38:09
问题 I can't make my "go to top" id=arrow-up div to disappear when on e.g. top of the page. At the top of the page I got So I would like the arrow-up div to visible(show("slow")) when not on top of the page. var tmp = $(window).height(); Tmp is used to get the viewport height... Not sure if that is right? I have seen other solutions but they are only kind of the same... and I can't make them work, also they font use :in-viewport . Can I make it with viewport or am I side tracked? <script type=

Android ignores maximum-scale when using fixed-width viewport meta-tag

由 人盡茶涼 提交于 2020-01-12 03:51:31
问题 I have a fixed-width web page (640 pixels wide). I would like this page to shrink to the width of a mobile device. However, if the device's native width is larger than 640 pixels, I do not want it stretched. Seems simple enough: <meta name="viewport" content="width=640, maximum-scale=1.0" /> This works as expected in iPad/iPhone. However, on an Android tablet (ex. in landscape mode), the content gets scaled up to fit the display. In other words, Android is simply ignoring maximum-scale=1 .
订阅 viewport