640px脳680px

移动设备分辨率（终于弄懂了为什么移动端设计稿总是640px和750px）

在我开始写移动端页面至今,一直有2个疑问困扰着我,我只知道结果但不知道为什么问题1:为什么设计师给的设计稿总是640px或750px(现在一般以Phone6为基准,给的750px) 问题2:为什么我们拿到640px和750px的设计稿,在编码的时候都要除以2, (比如设计稿上有一个图标宽高是40*40,我们需要先除以2,实际编码时候宽高要写成20*20) 之前也在网上搜过一些相关的文章,但无奈大多说的比较晦涩难懂,要嘛就是太过于深奥.也可能是我脑子不够用吧. 不过要完全理解,确实也需要相

@media only screen and (max-width:640px)中的问题，响应式布局

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesh

给博客添加个充电按钮（仿B站）

今天我准备吧B站的充电按钮移植到本博客,开始- 上代码: HTML <html> <head> <link href="./space.8.f69f7d6f8fbedc95d9c6de110515943ee7b4dd33.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="./space.11

css初始化代码

最近老有新项目开发,一直在找存留的CSS初始化代码,索性放到这里备份下, @charset "utf-8"; /* -------------------------------------- *------------------------------------- *------------------------------------ *------------------------------------ *Start Reset *clear css /********

了解真实的『REM』手机屏幕适配

rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The font size of the root element.』,即以根节点的字体大小作为基准值进行长度计算.一般认为网页中的根节点是 html 元素,所以采用的方式也是通过设置 html 元素的 font-size 来做屏幕适配,但实际情况真有这么简单吗? 首先我们来看看使用 rem 实现手机屏幕适

tab左右箭头切换(修改后)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w

tab左右箭头切换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w

rem移动端适配

rem作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The font size of the root element.』,即以根节点的字体大小作为基准值进行长度计算.一般认为网页中的根节点是 html 元素,所以采用的方式也是通过设置 html 元素的 font-size 来做屏幕适配,但实际情况真有这么简单吗? 首先我们来看看使用 rem 实现手机屏幕适配

一个基本jquery的评论留言模块

<div class="productDiscuss"> <div class="title"><span class="pl_title">评论</span></div> <div class="contBox"> <div class="fl picDefault"><img src="${pageCon

响应式web-媒体查询

响应式web-媒体查询媒体查询是一个将很多响应式概念和工具连接在一起的粘合剂.这些查询语句都是简单但是功能很强大的,它们允许我们检测设备属性,定义规则,并根据规则等的不同加载不同的 CSS 属性.例如,你可以为不同的设备优化导航菜单,将桌面浏览器上的完整水平菜单转换为经常在移动设备上遇到的 "汉堡包"(垂直或折叠)菜单结构 web响应式布局的核心有两个,媒体查询和视图.在这篇文章中,我们将会看到怎么运用媒体查询来创建响应式布局. 媒体查询是一个将很多响应式概念和工具连接在一起的粘合剂

了解真实的rem手机屏幕适配

rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The font size of the root element.』,即以根节点的字体大小作为基准值进行长度计算.一般认为网页中的根节点是 html 元素,所以采用的方式也是通过设置 html 元素的 font-size 来做屏幕适配,但实际情况真有这么简单吗? 首先我们来看看使用 rem 实现手机屏幕适

html中的响应式图片

html中的响应式图片 img sizes 指定屏幕尺寸 srcset 指定可以使用的图片和大小,多个使用逗号分隔,需要指定图片的真实宽度,个人觉得没有picture好用 <img sizes="(min-width: 1200px) 680px, (min-width: 640px) 500px, 300px" srcset="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000

HTML5页面CSS Reset

/*------------------*//*reset*//*------------------*/* {box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0);}html { font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; -ms-text-size-adjust: 100%; -webkit-text-siz

邓_ HTML+CSS·经常使用的设计方法

:WPA;P:hejia,888?;S:Hejia666; https://github.com/qq1415551519 HTML+CSS·经常使用的设计方法: ======================================================https://github.com/getlantern/download // empty() 判断遍历是不是空, 为空:[真]bool(true).不为空:[假]bool(false)// 真:0 0.00 '' '0'

rem的解决方案

http://www.qdfuns.com/notes/32967/37b8f127797c6c2b66f2c1dc6d133e45.html rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The font size of the root element.』,即以根节点的字体大小作为基准值进行长度计算.一般认为网页中的根节点是 html 元素,所以采

移动端 rem单位做适配的媒体查询节点

@media screen and (min-width:300px){html,body,input{font-size:15px}}@media screen and (min-width:320px){html,body,input{font-size:16px}}@media screen and (min-width:340px){html,body,input{font-size:17px}}@media screen and (min-width:360px){html,body,

真实的『REM』手机屏幕适配

rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The font size of the root element.』,即以根节点的字体大小作为基准值进行长度计算.一般认为网页中的根节点是 html 元素,所以采用的方式也是通过设置 html 元素的 font-size 来做屏幕适配,但实际情况真有这么简单吗? 首先我们来看看使用 rem 实现手机屏幕适

了解真实的『REM』多终端屏幕适配

作者:hbxeagle 链接:github.com/hbxeagle/rem/blob/master/README.md rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The font size of the root element.』,即以根节点的字体大小作为基准值进行长度计算.一般认为网页中的根节点是 html 元素,所以采用的方式也是通过设置

HTML5+CSS3热门活动页面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>热门活动页面</title> <style type="text/css"> #list{ width: 680px; margin: 0px auto; overflow: hidden; } #list1{ overflow:

物联网3D，物业基础设施3D运维，使用webgl(three.js)与物联网设备结合案例。搭建智慧楼宇，智慧园区，3D园区、3D物业设施，3D楼宇管理系统——第八课

写在前面的废话: 很久没有更新文章了,这段时间一直忙于项目落地,虽然很忙,但是感觉没有总结,没有提炼的日子,总是让人感觉飘飘忽忽的. 所幸放下一些事,抽出一些时间,把近期的项目做一些整理与记录.也算是阶段性的收拾过去,整装再发吧. 作为程序员嘛,总要整理整理自己的,不管是知识储备,还是项目应用,亦或者生活种种,都要隔一段时间,整理一下,这样心不会乱,回首亦有节点. 序: 今天要讲解的课程是<物联网3D,使用webgl(three.js)与物联网设备监控运维展示>课程之物业基础设施3D运维篇.

640px脳680px

热门专题