您的位置：首页 > Web前端 > BootStrap

初见Bootstrap

2020-03-06 13:43 961 查看


1.代码开头段，不同于HTML。简单声明就可以了。

<!DOCTYPE html>

<html>....</html>

BootstrapBootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
这个可以保证页面在各种设备上，展现出来1：1的比例，不会有任何缩放。

但是如果没有缩放，就是手机上看电脑页面大小，会出现及其不方便的滚动条等。所以进行了优化

<meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

这是一个针对iPhone页面的设计。 minimum-scale：最小比例 maximum-scale：最大比例。把宽度设置为320px，且不缩放而且禁止用户缩放。

device-width
指的是设备的物理宽度，
width
是页面宽度

那么以下要先了解下什么设备像素和css像素。

资料来源:http://weizhifeng.net/viewports.html

1、css像素，比如你设置页面100px,你用浏览器缩放功能，把100px填满了设备像素，就是等于吧100px扩大了10倍多。

2、设备像素，就是你的显示器的像素大小,其实也就是你屏幕大小。如果写了设备像素，浏览器的缩放功能不能实现，因为设备的像素是不可改的。[screen.width/height]

如果想要知道浏览器内部框架大小，可以通过js的window.innerWidth/Height，去测定大小，然后知道你的界面需要多少像素。界面缩小和最大化都会变参数。

  • 点赞
  • 收藏
  • 分享
  • 文章举报
小测试_ 发布了1 篇原创文章 · 获赞 0 · 访问量 117 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航