精华内容
下载资源
问答
  • 我们可以知道,页面主体中规中矩,分为两部分:上半部分是介绍页面,下半部分是主体界面,有一个点击按钮来负责全部用户交互,为了适配iphone4到6plus以及众多安卓,我们对整个页面的架构可以有如下几种方案:01-...

    0818b9ca8b590ca3270a3433284dd417.png

    我们可以知道,页面主体中规中矩,分为两部分:上半部分是介绍页面,下半部分是主体界面,有一个点击按钮来负责全部用户交互,为了适配iphone4到6plus以及众多安卓,我们对整个页面的架构可以有如下几种方案:

    01-

    高度百分比

    高度百分比方案——整个屏幕的主要高度高度都用百分比定位,比如介绍部分占高度的百分之30,点击抢红包部分占剩下的百分之70。

    优点——易于理解好上手

    缺点——由于行内样式,行间样式和它们的父子元素具有复杂的宽高关系,因此内部,比如介绍部分的内部的诸多元素想必还要用到px,em等定位方式,因此不那么和谐和有保障,容易小屏溢出或者大屏留白。在这个页面表现为倒计时文字部分和帮谁谁谁砍价的部分难以控制。

    02-

    flex按列布局

    flex布局是一个很不错的方式:对于这个页面,我们可以有如下构想:对于介绍部分,用px或者em定位和布局,而对于剩下的部分则用flex让他填充好下边的空间,再用绝对定位让砍价按钮水平垂直都居中,简直丝滑。

    优点——丝滑。

    缺点——要硬说有什么缺点的话,那么下端宽度不好控制算一个吧,试想这样构建出来的页面可能会在iphone4中下端一个按钮几乎占满,而在6普拉斯中则会有大量留白。

    03-

    大杀器rem

    我们知道在rem出来之前,em有着定位根为父元素的天然缺陷,比如在这样的页面中。

    html>body>div.parent>div.son

    有这样的css:

    .html{

    font-size:10px;

    .parent{

    font-size:2em;

    .son{

    font-size:1em;

    }

    }

    }

    注意以上css写法用了sass。html也简写了。

    然后你猜son的字体是多少px?是20,没错。因为他的参照元素是.parent元素,而不是根,这样的话嵌套多了谁敢用em。

    幸好rem的横空出现解决了这种问题:rem的参照物就是根元素的font-size,这让我们对于不同的页面有了设置全局标准的可能,大屏幕,我可以设置大的字体单位,小屏幕设置小的。一举解决了百分比定位和flex布局的遗留问题。

    怎样确定字体单位呢?有两种方法,第一种比较优雅:媒体查询,我们可以用媒体查询看看浏览设备的宽高,然后设置一个合适的字体单位,另一种方法比较精确,那就是用js去算。

    body宽度document.body.clientWidth

    body高度document.body.clientHeight

    document.documentElement.clientWidth ==> 可见区域宽度

    document.documentElement.clientHeight ==> 可见区域高度

    计算方法是这样的,对于这个页面来说:

    假设:设计稿高度1500px,设计稿中介绍部分高度300px,倒计时字体大小40px,屏幕高度1000px。

    第一步:计算单位:html的font-size = 屏幕高度 / 100 –>10px;

    第二步:介绍部分设置成高度30rem。

    第三步:字体大小设置成4rem。

    啊哈,发现他的优点了嘛,没错,全局等比放大的适应。这就意味着,你在6plus里面能看的页面,在iphone4里面同样能看,而且不会因为屏幕小而发生元素交叠的情况,也不会因为屏幕大而出现留白的情况,是我目前最喜欢的一种表达方式。

    优点:做到了完美适配。

    缺点:只是等比放大,小屏下字体小,大屏下字体大(不过从经验来讲,字体的大小并不明显,因为屏幕在那呢,看着也舒服)。

    缺点反驳:我觉得只有一套设计稿,大小屏幕都兼顾完美是不可能的,因为你不知道什么时候该让一个字占用绝对20像素还是绝对是屏幕宽度的百分之五。如果要做到兼顾,也是可以的:用多套设计稿+css媒体查询为不同宽度的页面写好不同的css样式。

    对于多屏页面。

    1.在reset.css页面加入媒体查询来根据不同的宽度定好字体单位。

    2.大杀器rem

    使用方法同上,不过上面是根据高度来确定字体单位,这里可以用宽度来确定字体单位。

    var html = document.getElementsByTagName("html");

    html[0].style.fontSize = document.documentElement.clientWidth/10+"px";

    让页面在都完美显示算是我实习期间的研究之一,经过了比较,我还是用大杀器rem觉得比较方便一些,当然还有诸多方法值得尝试,比如rem+flex等等,如果有不当之处,还请各位前辈抨击,批评,丢石头给我,感谢前辈和同行的指点!

    document.body.clientWidth ==> BODY对象宽度

    document.body.clientHeight ==> BODY对象高度

    document.documentElement.clientWidth ==> 可见区域宽度

    document.documentElement.clientHeight ==> 可见区域高度

    网页可见区域宽: document.body.clientWidth

    网页可见区域高: document.body.clientHeight

    网页可见区域宽: document.body.offsetWidth (包括边线的宽)

    网页可见区域高: document.body.offsetHeight (包括边线的高)

    网页正文全文宽: document.body.scrollWidth

    网页正文全文高: document.body.scrollHeight

    网页被卷去的高: document.body.scrollTop

    网页被卷去的左: document.body.scrollLeft

    网页正文部分上: window.screenTop

    网页正文部分左: window.screenLeft

    屏幕分辨率的高: window.screen.height

    屏幕分辨率的宽: window.screen.width

    屏幕可用工作区高度: window.screen.availHeight

    屏幕可用工作区宽度: window.screen.availWidth

    // 部分jQuery函数

    $(window).height()  //浏览器时下窗口可视区域高度

    $(document).height()    //浏览器时下窗口文档的高度

    $(document.body).height()      //浏览器时下窗口文档body的高度

    $(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括                                   border padding margin

    $(window).width()  //浏览器时下窗口可视区域宽度

    $(document).width()//浏览器时下窗口文档对于象宽度

    $(document.body).width()      //浏览器时下窗口文档body的高度

    $(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括    border padding

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

    scrollHeight: 获取对象的滚动高度。

    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

    scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

    scrollWidth:获取对象的滚动宽度

    offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

    offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

    offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

    event.clientX 相对文档的水平座标

    event.clientY 相对文档的垂直座标

    event.offsetX 相对容器的水平坐标

    event.offsetY 相对容器的垂直坐标

    document.documentElement.scrollTop 垂直方向滚动的值

    event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方      向滚动的量

    ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦

    作者:Jake原文:

    http://i.jakeyu.top/2016/04/18/%E5%A6%82%E4%BD%95%E8%AE%A9%E9%A1%B5%E9%9D%A2%E9%80%82%E9%85%8D%E5%90%84%E7%A7%8D%E6%9C%BA%E5%9E%8B/

    0818b9ca8b590ca3270a3433284dd417.png

    点击“阅读原文”,看更多

    精选文章

    ↓↓↓

    展开全文
  • 移动web的适配问题

    2020-03-15 20:29:27
    1. 适配问题 移动设备屏幕尺寸不一样,不同型号的手机会有不同大小的屏幕,不同型号的平板也是,就算是我们的PC端也是会有不同大小的屏幕。将在PC端写好的饿页面直接拿到移动端去显示会是怎样的?默认不会出现滚动条...

    1. 适配问题

    移动设备屏幕尺寸不一样,不同型号的手机会有不同大小的屏幕,不同型号的平板也是,就算是我们的PC端也是会有不同大小的屏幕。将在PC端写好的饿页面直接拿到移动端去显示会是怎样的?默认不会出现滚动条,但是会出现缩放。

    解决方案:
    在《京东商城》移动站中用的是百分比自适应布局,也就是流式布局。同时,需要对移动端的viewport视口进行设置,就会达到适配的目的。

    2. 流式布局

    流式布局就是百分比布局,非固定像素,内容会根据窗口的大小向两侧填充,可以理解成是流动的布局,这样的布局称为流式布局。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>流式布局</title>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            .box {
                background-color: antiquewhite;
                width: 100%;  /*默认就是100%*/
            }
        </style>
    </head>
    <body>
        <div class="box">
            好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!
            好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!
            好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!
            好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!
            好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!
            好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!
            好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!
            好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!
            好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!
            好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!好好学习天天写代码!写好代码去看李易峰!
        </div>
        
    </body>
    </html>
    

    3. 视觉窗口viewport

    将PC端写好的页面怎么展示在移动端?借助浏览器的手机模拟器。

    viewport是移动端特有的,这是一个虚拟的区域,用来承载网页。PC端的页面直接就承载在浏览器窗口里面,而移动端多出了这样一个虚拟区域,用它来承载网页。在移动端,它们之间的关系是:浏览器承载viewport,viewport承载网页。

    存在的问题: 将写好的页面放在移动端显示,会出现缩放的现象,之前的字体变小了,如何解决这个问题?---- 需要一个适配方案。

    1. 适配要求:
      1. 网页宽度必须和浏览器保持一致。
      2. 默认显示的缩放比例要和PC端保持一致(缩放比例是1.0)
      3. 不允许用户自行缩放网页

    满足上述的要求,就达到了适配,是国际上通用的适配方案,标准的移动端适配方案。

    1. 适配设置
      如果什么设置都没有,使用的就是viewport的默认设置,想要达到适配要求,就要去设置viewport。
    <meta name="viewport">
    

    书写位置:在head里面并且应该紧跟着编码设置,是为了保证能够优先加载。

    1. viewport的功能
      1. width可以设置宽度,height可以设置高度
      2. initial-scale可以设置默认的缩放比例
      3. user-scalable可以设置是否允许用户自行缩放
      4. maximum-scale可以设置最大缩放比例,minimum-scale可以设置最小缩放比例
    <meta name="viewport" content="">
    

    其中的content就可以使用以上参数。

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    

    表示这个viewport的宽度是设备的宽度,默认的缩放比例是1.0,并且不允许用户自动缩放。这个就是国际上标准的适配方案。创建标准适配方案的快捷键:meta:vp

    4. 非主流适配方案:了解。

    <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
    

    表示缩小一半。原网页的宽度就是现在设备宽度的2倍。

    <meta name="viewport" content="width=device-width, initial-scale=0.3333333333, maximum-scale=0.3333333333, minimum-scale=0.333333333, user-scalable=no">
    

    表示缩小到原来的1/3。原网页的宽度就是现在设备宽度的3倍。
    以上是m.taobao.com在两个不同的移动端设备上的适配,为什么比例不一样?依据是什么?屏幕像素比。

    1. 非主流适配方案的特点:

      1. 页面的真实尺寸会比在设备上的尺寸要大几倍。
        比如:iPhone4的设备宽度是320px,则它的网页尺寸是640px
      2. 缩放操作:有2倍的,有3倍的 ,这个倍数与屏幕像素比有关系。
    2. 理解像素: 我们之前用的px指的是页面的尺寸单位,而这里说的屏幕像素指的是物理像素或者像素点。物理像素就是设备显示屏的最小可视颗粒的大小,现在有高清显示屏,视网膜屏,retina屏,基本都是肉眼不可见了。这样的情况下,显示的效果提高了,但是在显示同等质量的图片时会出现模糊效果。在高清显示屏中图片可能会失真。

    在屏幕像素比高的设备,图片(非矢量)显示会模糊。屏幕像素比就是指:一个px的宽度能够放几个物理像素。这种非主流的适配方案就是为了提高网页的清晰度,即根据屏幕像素比来缩放网页。但是这样的适配方案非常高,一般使用的还是标准的适配方案。

    展开全文
  • 在网上搜了搜,有一个叫Bumblebee Project的项目在做Nivida显卡的驱动适配工作,安装上试一试。果然不错,尽管还是略热,但也就是Win7以下地温度。毕竟,如今已经是夏天了嘛,总比原来能在上面能...

    刚装ubuntu的时候那是相当地热,hot。直接地原因是没有对应地显卡驱动,然后在software update里面找到Nivida地最新驱动,兴高採烈地装上试一试。一点用处没有!

    在网上搜了搜,有一个叫Bumblebee Project的项目在做Nivida显卡的驱动适配工作,安装上试一试。果然不错,尽管还是略热,但也就是Win7以下地温度。毕竟,如今已经是夏天了嘛,总比原来能在上面能够烤鸡蛋要好得多。

    详细过程例如以下:

    对于14.04和更新地ubuntu版本号:

    1.Alt +Ctrl+T打开命令行

    2.Enable the Universe and Multiverse repositories in order to allow the bumblebee and nvidia packages to be installed。

    然后输入sudo apt-get install bumblebee bumblebee-nvidia primus linux-headers-generic

    3.reboot

    对于12.04

    1.Alt +Ctrl+T打开命令行

    2.Enable the Universe and Multiverse repositories in order to allow the bumblebee and nvidia packages to be installed,

       然后输入sudo add-apt-repository ppa:bumblebee/stable

    3.sudo apt-get update

    4.Install Bumblebee using the default proprietary nvidia driver for 12.04:

    sudo apt-get install bumblebee bumblebee-nvidia virtualgl linux-headers-generic

    5.reboot

    參考文献:Bunblebee Project解决Ubuntu温度过热问题

    展开全文
  • 问题:同一个网页,在web端显示良好,在移动端访问可读性非常差。 目的:One page for all devices。网页在不同的设备打开,在不同的分辨率下打开时可读可用。网页能够兼容多个终端——而不是为每个终端做一个特定...

    问题:同一个网页,在web端显示良好,在移动端访问可读性非常差。

    目的:One page for all devices。网页在不同的设备打开,在不同的分辨率下打开时可读可用。网页能够兼容多个终端——而不是为每个终端做一个特定的版本。

     

    也就是我们常说的如何构建“响应式网页设计”(responsive web design)。

    示例网站   250个响应式页面模板

     

    解决方案涉及到的知识点:

    • viewport
    • media query
    • Javascript window.matchMedia
    • 响应式图片
    • 栅格布局
    • 顶部导航
    • 测试工具 

    iOS和Android自带的浏览器都是基于webkit内核,所以我们可以使用viewport属性和media query技术实现网站的响应性。

     

     

    viewport

    <head>之中添加viewport元数据标签。

    width=device-width 实现屏幕适配,页面绘制根据触屏大小变化,保持一致。

    initial-scale 表示初始缩放。 

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

      

    maximum-scale 表示最大缩放比例,1意味着不能进行缩放。

    user-scalable=no  禁用页面缩放(zooming)功能。禁用缩放后,用户只能滚动屏幕,让你的网站看上去更像原生应用。

    注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定! 

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

      

     

    media query

    根据不同的分辨率,引用不用的css

     

    <link rel="stylesheet" type="text/css"
      media="screen and (max-device-width: 480px)"
      href="shetland.css" />
     

     

    Bootstrap3的实现 http://v3.bootcss.com/css/#grid-media-queries ,

    以下是LESS方法的实现

    /* Small devices (tablets, 768px and up) */
    @media (min-width: @screen-sm-min) { ... }
    
    /* Medium devices (desktops, 992px and up) */
    @media (min-width: @screen-md-min) { ... }
    
    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: @screen-lg-min) { ... }

     

    Javascript window.matchMedia

    用CSS3解决的确很方便,但某些场景下仍然需要JS技术。

    if (window.matchMedia("(min-width: 400px)").matches) {
      // The screen width is 400px or wider.
    } else {
      // The screen width is less than 400px.
    }

     

     状态改变时监听

    function setup_for_width(mql) {
      if (mql.matches) {
        // The screen width is 400px or wider.  Set up or change things
        // appropriately.
      } else {
        // The screen width is less than 400px.  Set up or change things
        // appropriately.
      }
    }
    
    var width_mql = window.matchMedia("(min-width: 400px)");
    // Add a listener for when the result changes
    width_mql.addListener(setup_for_width);
    // And share the same code to set things up with our current state.
    setup_for_width(width_mql);

     

     

    matchmedia

    大小:595B

    检测浏览器是否支持media query和media type。

    使用方法如下:

    <script src="http://scottjehl.github.io/picturefill/external/matchmedia.js"></script>

      

    //测试 'tv' 媒体类型
    if (matchMedia('tv').matches) {
      // tv media type supported
    }
    
    //测试移动设备的媒体查询
    if (matchMedia('only screen and (max-width: 480px)').matches) {
      // smartphone/iphone... maybe run some small-screen related dom scripting?
    }
    
    //测试 landscape orientation
    if (matchMedia('all and (orientation:landscape)').matches) {
      // probably tablet in widescreen view
    }

     

     

     

    响应式图片

    1、最简单的方法是为图片赋予了max-width: 100%;height: auto;属性,可以让图片按比例缩放,不超过其父元素的尺寸。Bootstrap 3定义为.img-responsive class。 

    <img src="..." class="img-responsive" alt="Responsive image">

      

    2、第一种方法不能解决图片模糊问题。使用CSS3的content属性,结合媒体查询,我们要为每种设备宽度分别准备图片。这种方法会下载多张图片。

    @media (min-device-width:992px) { 
    	img[data-src-992px] { content: attr(data-src-992px, url); }
    }
    @media (min-device-width:1200px) {
    	img[data-src-1200px] { content: attr(data-src-1200px, url); }
    }
    
    <img src="image.jpg" 
         data-src-992px="image-992px.jpg" 
         data-src-1200px="image-1200px.jpg" alt="">

     

    如果我们需要:

    只下载需要的一张图片

    语义化

    可访问

    向后兼容

    面向未来技术。。。

     

    3、picturefill插件

    大小:1.8K

    Demo: http://scottjehl.github.io/picturefill/

    简洁:基于matchmedia库实现图片适配。在不支持js的浏览器下也有好的表现。 

    <script src="http://scottjehl.github.io/picturefill/external/matchmedia.js"></script>
    <script src="http://scottjehl.github.io/picturefill/picturefill.js"></script>
      
    <span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
            <span data-src="small.jpg"></span>
            <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
            <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
            <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
    
            <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
            <noscript>
                <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
            </noscript>
        </span>

    这种方法会根据屏幕大小下载特定的图片,不会将所有定义的图片都下载,所以不用担心带宽的问题。

    改变屏幕的宽度,会下载适配的图片,在WEB端也有良好的表现。

     

      4、srcset-polyfill插件

    大小:7.42K

    简介:使用这个插件的一个最重要的理由是:按需下载图片,避免移动端下载大图,减少访问带宽。

    利用img的srcset标签,写法比较简洁。

    <img alt="The Breakfast Combo"
         src="banner.jpeg"
         srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w,
                 banner-phone-HD.jpeg 100w 2x"/>

    屏幕宽度为1440px出现的是banner.jpeg,iphone5上出现的是banner-HD.jpeg,Nexus出现的是banner-HD.jpeg。

    iphone上准备的图片要比web上的图片大一倍。

    Web浏览器测试结果:只加载src中定义的图片

     

    定义更精确的屏幕范围,

    src属性中定义 最小的图片(下面例子中的: banner.jpeg)

    srcset属性中定义 最小图片和它相关连的最大viewport宽度(下面例子中的: banner-HD.jpeg 640w)

    srcset属性中定义 更大的viewport宽度(下面例子中的: banner-phone.jpeg 1024w)

    srcset属性中定义 支持的最大图片且不标注viewport宽度(下面例子中的: banner-phone-HD.jpeg)

    <img alt="The Breakfast Combo"
             src="banner.jpeg"
             srcset="banner-HD.jpeg 640w, banner-phone.jpeg 1024w, banner-phone-HD.jpeg">

     

     Web浏览器测试结果:除了加载src中的图片,还根据屏幕大小(测试浏览器宽度1440px)加载了banner-phone-HD.jpeg。iphone5上出现的是banner-phone.jpeg,Nexus出现的是banner-phone.jpeg。

     

    5、对比 picturefill 和 srcset-polyfill

    picturefill 文件更小(但是多了一个依赖库);WEB端页面下载后改变窗口大小,会下载适配的图片。但是,由于是从span标签通过js转为img标签,所以web端图片加载比srcset慢慢慢慢。。。

    srcset-polyfill语法简洁;页面加载后,图片不会重新下载,适配性没有picturefill好。

     

    这个Demo可以看到两种效果:

    页面加载时的资源请求状况

     

    将窗口缩小又放大后,picturefill会不断请求适配图片,包括已经下载过的wedding-medium.jpg

     

      

    6、Gruntresponsive images插件(暂时没用,先mark)

    [Demo]http://andismith.github.io/grunt-responsive-images/

     

     

    栅格系统

    Bootstrap3的实现  http://v3.bootcss.com/css/#grid-options

    Bootstrap 3中的新的网格系统允许根据设备大小通过变量来声明。 

    比如,你可以针对桌面环境设置4列布局,针对平板电脑设置2列布局,针对手机设置1列布局。 

    这样,你就可以很容易地控制你的页面的跨设备显示效果。

     

    一个用Bootstrap3布局的网站示例

     

     

    顶部导航

     设置data-target="#b-menu-1",对应导航。

     

    <!-- fixed navigation bar -->
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#b-menu-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Bootstrap website</a>
        </div>
        <div class="collapse navbar-collapse" id="b-menu-1">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Option 1</a></li>
                <li><a href="#">Option 2</a></li>
                <li><a href="#">Option 3</a></li>
              </ul>
            </li>
          </ul>
        </div> <!-- /.nav-collapse -->
      </div> <!-- /.container -->
    </div> <!-- /.navbar -->
    
    同时boot可以定制折叠模式与水平模式的阈值

    根据你所放在导航条上的内容的长度,也许你需要调整导航条进入折叠模式和水平模式的阈值。通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求。

       

    全屏问题:

    bootstrap3的 .container做了适配定宽,可以添加一个id=“container”设置 #container { width: 100%; }

    .row设置了margin-left: -15px; margin-right:-15px;所以某些状况下会出现横向滚动条,清除这条样式就可以了 .row { margin-left:0; margin-right:0; }

      

    定制折叠模式与水平模式的阈值

    根据你所放在导航条上的内容的长度,也许你需要调整导航条进入折叠模式和水平模式的阈值。通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求。

      

     

    表单

     

    根据列的表单布局,使用更整洁的网格类

     

    <div class="row">
      <div class="col-span-4">
        <label></label>
      </div>
      <div class="col-span-8">
        <input type="text"/>
      </div>
    </div>

     

     

    Canvas绘制

    一个Demo

     

     

    测试工具

    在线测试你的网页 http://www.isresponsive.com/

    这个测试工具也可以帮助你判断某些网站到底是用前端技术,还是服务端实现手机访问。

     

    Adobe Edge Inspect CC

    同步开发测试工具,付费版可协同多设备,实时同步浏览器、无需刷新。

     

     

    模板

    http://punyweblab.com/projects/bolt/

     

    参考

    http://alistapart.com/article/responsive-web-design

     

    https://speakerdeck.com/addyosmani/mobile-workflow

    http://mienflying.bitbucket.org/responsive/#intro

    http://v3.bootcss.com/css/#grid-media-queries

     图片

    http://css-tricks.com/responsive-images-hard/

    https://github.com/scottjehl/picturefill

    https://github.com/paulirish/matchMedia.js/

    https://github.com/andismith/grunt-responsive-images

    https://github.com/borismus/srcset-polyfill

    http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#processing-the-image-candidates

     tutorials

    http://www.script-tutorials.com/responsive-website-using-bootstrap/

    http://tmp.devcharm.com/pages/responsive-web-design-introduction

    plus

    https://plus.google.com/s/%23Responsive

     

    Responsive Design Weekly 

    http://responsivedesignweekly.com/

    展开全文
  • 如果排查的思路对你有帮助,请记住 消雨匆匆 or 大吊工。码字和排查很累,仅此而已 ,硬件不是抄...六、问题解决 一、问题引出: 前些天,有个人问我,为什么他设计的功放电路老是把喇叭烧坏了? 对方是一个2....
  • 但是现在随着越来越多的人开始使用xib,怎样适配不同屏幕的尺寸和横竖屏,成了亟待解决问题,好在两年前就已经推出并且日臻完善的xib autolayout技术可以完美的解决。 首先需要说下需求:需要登陆LoginViewCont
  • 适配控件对话框

    万次阅读 热门讨论 2007-08-02 13:52:00
    源文件下载 最近在论坛上经常能看到帖子询问怎样使对话框内的控件随着对话框的缩放而改变布局,曾经也遇到过这个问题,现在将解决方案拿出来与大家共同探讨一下。 说到这个问题如何解决,我想每个熟悉MFC界面编程...
  • Android提供了一套资源命名和编译机制,方便开发者适配多种手机屏幕和分辨率。   今天来讲一下如何将界面布局中的固定尺寸值适配至多种手机屏幕和...使用res/values/dimens.xml来解决这一问题!   以下是一...
  • Vue项目中使用vw实现移动端适配 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem。 1.准备工作 我是用vue-cli脚手架搭建vue项目的,怎样搭建就不赘述了,当我们采用...
  • 本来这种需要以前做过的,感觉挺简单的,后面发现坑比较多,看了很多博客和资料总是有些问题解决不了,比如兼容android6.0版本,到底需要动态申请哪些权限,以什么样的方式友好提示用户,怎样监听wifi连接成功或者...
  • 获取WIFI列表及连接WIFI【适配6.0】 这一篇真的够了

    万次阅读 热门讨论 2017-11-27 22:12:39
    本来这种需要以前做过的,感觉挺简单的,后面发现坑比较多,看了很多博客和资料总是有些问题解决不了,比如兼容android6.0版本,到底需要动态申请哪些权限,以什么样的方式友好提示用户,怎样监听wifi连接成功或者...
  • 很多同行在开发中可能会遇到这样的问题,就是在加载图片的时候会出现图片变形的问题.其实这很可能就是你的图片宽高比和图片所在容器的...怎样解决这个问题呢?这个时候就可以创建一个能够自适应图片宽高比的父容器来包裹I
  • Android对不同DPI的dimen选择优先级问题问题描述笔者最近发现这么一个问题,如果仅对values-ldpi和values-xxhdpi下的dimen进行设定,那么hdpi下的手机进行...先看看源码对这个屏幕密度适配做了怎样的处理。bool ResTab
  • 问:有些项目用xcode7打开运行,打包安装到iOS9设备上程序会闪退。 如果用xcode7以下编译,然后打包到iOS9的设备...所以做为开发者怎样为自己维护的App做适配呢? 最快解决的方法肯定是使用Xcode7以下的编译打包。
  • 把这两个点都解决问题解决了。 大家把我之前的文章都看完,会发现这两个点上都有好多种策略,那么在不同的手机上,两个点的不同策略就有多种组合方式,也也是我适配手机的主要手段。 当时我适配测试的手机...
  • autolayout

    2019-10-02 22:59:51
    但是现在随着越来越多的人开始使用xib,怎样适配不同屏幕的尺寸和横竖屏,成了亟待解决问题,好在两年前就已经推出并且日臻完善的xib autolayout技术可以完美的解决。 首先需要说下需求:需要登陆LoginViewC...
  • 但是现在随着越来越多的人开始使用xib,怎样适配不同屏幕的尺寸和横竖屏,成了亟待解决问题,好在两年前就已经推出并且日臻完善的xib autolayout技术可以完美的解决。 首先需要说下需求:需要登陆LoginViewCont
  • 但是现在随着越来越多的人开始使用xib,怎样适配不同屏幕的尺寸和横竖屏,成了亟待解决问题,好在两年前就已经推出并且日臻完善的xib autolayout技术可以完美的解决。 首先需要说下需求:需要登陆LoginViewCont
  • 但是现在随着越来越多的人开始使用xib,怎样适配不同屏幕的尺寸和横竖屏,成了亟待解决问题,好在两年前就已经推出并且日臻完善的xib autolayout技术可以完美的解决。 首先需要说下需求:需要登陆LoginViewCont
  • iOS开发技巧之autolayout自动布局

    千次阅读 2015-09-22 23:49:03
    但是现在随着越来越多的人开始使用xib,怎样适配不同屏幕的尺寸和横竖屏,成了亟待解决问题,好在两年前就已经推出并且日臻完善的xib autolayout技术可以完美的解决。 AutoLayout是一种基于约束的,描述性的...
  • 添加假数据

    2016-04-01 00:00:00
    但现在问题是我没有数据,怎样解决? 之前,我想到,就是已有的数据转化为新的数据,就要考虑工作量 后来,我问了同事,其实是可以自己新建测试的数据来测试和解决问题的 所以,就在一个新方法,新添加了很多变量...
  • 虽然解决适配,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个入口,会大大增加架构设计的复杂度。自适应还暴露出一个问题,如果屏幕太小,即使网页能够根据屏幕大小进行适配,但是会感觉在小屏幕上...
  • (六)适配器模式

    2020-09-03 14:28:13
    适配器模式适配器模式适配器模式 介绍概念示例适配器模式 演示适配器模式 场景适配器模式 总结 适配器模式 介绍 ...怎样解决这个问题呢?只要使用一个电源转化器就行了。 [外链图片转存失败,源站可能
  • IOS 自动约束

    2015-08-15 16:23:57
    ...autolayout自动布局技术在iOS6就已经推出了,但是因为很多人一开始不习惯使用xib编程,而是...但是现在随着越来越多的人开始使用xib,怎样适配不同屏幕的尺寸和横竖屏,成了亟待解决问题,好在两年前就已
  • 16-07-24 UI布局时 px 与 dp sp 的转换

    千次阅读 2016-07-24 10:28:08
     根据上图的要求,怎样适配的显示在我们测试的手机上,是今天解决问题。  ui在设计时用的单位都是px,而我们在xml文件布局时用的单位是dp,这就涉及到px与dp的转换上来了。  px(设计图上的)转换为dp(xml用到的...
  • 最近在开发一个项目的过程中遇到一个问题,就是怎样把章节视频中的图标改成已看,未看,正在看。例如下图,出现一个问题就是如何把章节的图片进行适配。下面介绍一下我的问题。把图片插到对应位置。 一、满足的条件...

空空如也

空空如也

1 2
收藏数 39
精华内容 15
关键字:

怎样解决适配问题