zoukankan      html  css  js  c++  java
  • 19 01 05 移动端页面开发

    视口

    视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种情况,移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看,可以用 meta 标签,name=“viewport ” 来设置视口的大小,将视口的大小设置为和移动设备可视区一样的大小。

    设置方法如下( 快捷方式:meta:vp + tab )

    视网膜屏幕(retina屏幕)清晰度解决方案

    视网膜屏幕指的是屏幕的物理像素密度更高的屏幕,物理像素可以理解为屏幕上的一个发光点,无数发光的点组成的屏幕,视网膜屏幕比一般屏幕的物理像素点更小,常见有2倍的视网膜屏幕和3倍的视网膜屏幕,2倍的视网膜屏幕,它的物理像素点大小是一般屏幕的1/4,3倍的视网膜屏幕,它的物理像素点大小是一般屏幕的1/9。

    图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样,但是由于视网膜屏幕的物理像素点比一般的屏幕小,图像在上面好像是被放大了,图像会变得模糊,为了解决这个问题,可以使用比原来大一倍的图像,然后用css样式强制把图像的尺寸设为原来图像尺寸的大小,就可以解决模糊的问题。

    background新属性 
    background-size:

      • length:用长度值指定背景图像大小。不允许负值。
      • percentage:用百分比指定背景图像大小。不允许负值。
      • auto:背景图像的真实大小。
      • cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
      • contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内

    基于rem的布局

    首先了解em单位,em单位是参照元素自身的文字大小来设置尺寸,rem指的是参照根节点的文字大小,根节点指的是html标签,设置html标签的文字大小,其他的元素相关尺寸设置用rem,这样,所有元素都有了统一的参照标准,改变html文字的大小,就会改变所有元素用rem设置的尺寸大小。

  • 相关阅读:
    Eclipse配置SVN的几种方法及使用详情
    重新定位svn地址的方法(windows和linux),svn switch(sw)的帮助信息
    SVN版本库修改URL路径或者IP地址
    DEA中MAVEN项目有多个子目录,如何加载构建
    DBA的40条军规
    搜索 比MySQL快10倍?这可能是目前AWS Aurora最详解读!
    HttpClient 4.5.3 get和post请求
    基于HttpClient4.5.2实现的HttpClient工具类
    httpClient使用总结
    为何只能在其关联的线程内启动timer?(Qt会检查一致性,否则就不执行)
  • 原文地址:https://www.cnblogs.com/fromlantianwei/p/10227166.html
Copyright © 2011-2022 走看看