1.web端、app端 目前实现响应式布局,主要用以下两种方式。
CSS原生代码响应式布局 @media screen。
bootstrap移动设备优先、自带框架。

兼容性 用原生代码的话 根据不同的屏幕尺寸,用@media screen引入不同的值
用bootstrap,js文件自适应,优点是不用分屏幕尺寸,只用改一些小的数据。
web和app图不能相同,为了浏览速度最好使用雪碧图。

APP端。
CSS原生代码写 需要注意:①宽高,使用百分比的方式。
②宽的话,使用rem,不能在一套css里面使用两个单位,使用rem,最好用百分比。
③@media screen格式
④margin padding建议也用百分比
⑤meta viewport一定要加。允许(不允许)用户缩放
优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容
渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。

web前端基础篇⑨的更多相关文章

  1. web前端-基础篇

    该篇仅是本人学习前端时,做的备忘笔记: 一.背景图片设置: 设置背景图时的css代码:background-image:url(图片的url路径); ps:设置好这个背景后请一定要设置该背景图片的大小 ...

  2. web前端基础篇⑧

    1.伪类选择器 都以冒号开始.:focus 焦点的地方加样式:first-child 向元素的第一个子元素添加样式锚伪类:a:link {color:red} 未访问的链接 a:visited {co ...

  3. web前端基础篇①

    html1.html5和css3在IE上都不支持2.超过1100px以上的宽度,就会出现滚动条3.<!doctype html>解析模式 分为 标准模式 混杂模式 非标准模式-针对IE6o ...

  4. web前端基础篇⑩

    1.960栅格式布局法屏幕分辨率为1024*768.采用接 main宽为960px的布局方式12列式:每格60px 间距20px 3 6 3版 三格式布局(最常用)16列式:每格40px 间距20px ...

  5. web前端基础篇⑦

    1.img src/url后一般接地址信息 标题为<h1>-<h6> 字体依次变小 预文本格式<pre></pre> 2.a标签实现跳转 例:<a ...

  6. web前端基础篇⑥

    LESS.①是一种拓展技术,基于css.②包含变量.混合.函数.运算.③简化css代码.降低维护成本④目前用的解析器(koala) 变量(值可变)@变量名:值步骤:①建立文件夹②建html和less两 ...

  7. web前端基础篇⑤

    1.雪碧图技术(精灵图)sprite cpmpass-合并2.兼容性:1.reset充值技术,normalize技术2.加前缀-webkit —mom -ms— -o-3.<!Doctype&g ...

  8. web前端基础篇④

    1.BFC-块级元素-块级格式化上下文布局规则:独立区域,与外部毫不相关内部box会在垂直方向,一个个放置box垂直方向距离由margin决定BFC的区域不会与float box重叠计算BFC高度时, ...

  9. web前端基础篇③

    1.video视频 audio音频 controls出现控件 loop循环 autoplay自动播放例:<video/audio src=“地址” controls=“controls” loo ...

随机推荐

  1. Linux json解析jq

    jq是一个linux下很方便的json解析器,平时看json文件都是一行混在一起的,非常不适合阅读. https://stedolan.github.io/jq/download/ 直接到官网上下载, ...

  2. hadoop启动是常见小问题

    1.先su进入root账户,然后 service iptables stop //关闭防火墙 start-all.sh //启动 2.启动是会显示,如果出错日志保存路径!!!基本所有问题都要去这些日志 ...

  3. JDBC与Hibernate中SQL语句参数设置的顺序问题

    JDBC中:设置从1开始 例: Connection con = DriverManager.getConnection("jdbc:mysql://localhost/...", ...

  4. jQuery事件绑定on()、bind()与delegate() 方法详解

    jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...

  5. [HTML/HTML5]6 使用图像

    6.1  将图像作为Web页面的前景元素 使用img元素,就可以在Web页面中添加图像.img是image的缩写.只需在img元素中添加src(source的缩写)属性,并为该属性设置相应的值,就可以 ...

  6. JSON的一些细节

    这篇JSON的随笔只是为了简单地复习一下学习到的JSON的内容.都是一些很基础的东西.如果你不小心看到了这篇文,那就一起复习吧.(。・∀・)ノ JSON不支持JavaScript中的undefined ...

  7. Joomla

    joomla Joomla实际有两个开源的东西: 1.Joomla内容管理系统即JoomlaCMS(Content Management System, CMS).它是网站的一个基础管理平台.几乎适合 ...

  8. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  9. 在代码设置RelativeLayout的属性,比如layout_below

    ( (RelativeLayout.LayoutParams)holder.ivLvDivider.getLayoutParams()).addRule(RelativeLayout.BELOW, R ...

  10. Datafactory必须注意事项