css实现PC16px,手机14px

2024-09-06

css的手机适配

在html篇里提到设置视口宽度和设备宽度,固定的meta配置就是写死的,==死记硬背== 应该清楚的是手机端的适配应该克服的难题就是宽度根据手机屏幕的大小变化,而高度却没有办法跟随比例变化,也就是宽高比,比如在手机上要一行上排列三个div放正方形的三个div,要怎么做,三个div浮动排列后各自设置width为33.3%,那高度呢,在pc端可以直接100*100,但是手机不行,不等比排列太难看了实现手机宽高比,就是手机端适配的终极目标现在最常见的宽高比方案有两个一个是rem 一个vw,vh的

pure css做的手机页面

<!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0, m

css 兼容各类手机的写法待续

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */ .class{} } @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */ .class{} } /* 上面的写法合并后 */ @media (device-height:480px) and (-webkit-

固比固布局圣杯布局 css实现传统手机app布局

手机app的布局大致上都是头部.内容.底部三部分: 我们需要实现的是头部.底部高度固定:中间内容区域自适应且可以滚动:直接贴代码: css: html,body { width: 100%; height: 100%; } body { margin: 0; padding: 0; display: flex; flex-direction: column; } section { flex: 1; overflow-y: scroll; overflow-x: hidden; } header

css：去掉手机浏览器上点击时的边框和阴影

outline:none;(去掉蓝框) -webkit-tap-highlight-color:rgba(0,0,0,0) ;(去掉阴影)适用于ios,Android

[总结]WEB前端开发常用的CSS/CSS3知识点

css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那个.其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度或高度中较小的那个.其中最小的那个被均分为100单位的vmin; 视区所指为浏览器内部的可视区域大小, 即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工

Sass-也许你想和CSS玩耍起来（上篇）

我们努力,我们坚持,共勉! 众所周知,css其实不是一门编程语言,熟悉的人都知道css全称Cascading Style Sheets(层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们用它来实现表现层和结构层的分离,也就是html和样式的分离.你可以用它为网页制定样式,但是他无法像JavaScript一样声明变量,调用函数,使用条件语句,可以说JavaScript是灵活的,动态的,而css是死板的,一成不变的. 所

css教程如何修改留言板程序

error_reporting(0);$conn = new com("adodb.connection"); $conn->open("driver={microsoft access driver (*.mdb)}; dbq=" . realpath("db.mdb "));$rs=new com("adodb.recordset"); $abc = $_get["abc"]; $webn = $

[书目20131223]Android、iPhone、Windows Phone手机网页及网站设计:最佳实践与设计精粹 - 张亚飞

目录第I篇手机版专用网站设计和开发入门篇第1章准备创作环境和测试环境 3 1.1 使用Mobile Safari测试网页 4 1.1.1 iOS Simulator安装 5 1.1.2 使用Mobile Safari 6 1.2 使用IEMobile测试网页 7 1.2.1 Windows Phone 7 Emulator安装 8 1.2.2 使用IEMobile 9 1.3 使用Chrome Lite测试网页 10 1.3.1 Android Emulator安装 10 1.3.2 使

css 优先级

css优先级的四大原则: 原则一: 继承不如指定如果某样式是继承来的永远不如具体指定的优先级高.例子1:CODE:<style type="text/css">  </style> <span class="class3">我是多大字号?</span> 运行结果:.class3{ font-size

jQuery手机对话框插件

最近,公司一直在做微网站之类的,一直在看别的微网站,发现一些对话框的样式很不错,所以自己就动手把样式剥离出来写成一个简单的插件,方便其他项目中使用到.废话不多说,上插件源码: /* *jQuery简单消息框插件 *2014-03-14 *调用: *$.dialog.alert("提示消息"); *对话框的调用:$.dialog.message("消息");仅有确定的对话框 *$.dialog.message("消息", true, callbac

PC网站转换成手机版

博客地址:https://www.cnblogs.com/zxtceq/p/5714606.html 一天完成把PC网站改为自适应!原来这么简单! http://www.webkaka.com/blog/archives/how-to-modify-a-web-page-to-be-responsive.html 一天完成把PC网站改为自适应!原来这么简单! 作者:Kaka 时间:2015-8-27 11:26:9 浏览:5279 评论:8 网站自适应,很多人都认为是很高级需要

CSS样式基础：

CSS:外部文件导入 <link rel="stylesheet" type="text/css" href="./style.css"> 一. css概述 CSS是英文Cascading Style Sheets(层叠样式表)的缩写,是一种标记语言,不需要编译可以直接由浏览器解释执行(属于浏览器解释型语言). 1.内联式Inline(也叫行内样式):<p style="color:blue;font-family:

wap.css

wap.css 一.总结 1.官方有教程:英语的 http://www.developershome.com/wap/wcss/ 2.wap.css :就是控制页面在手机端样式的 3.DOCTYPE 声明:手机页面含有DOCTYPE 声明自己的项目中的样例<!doctype html> 4.wap.css地位:只是css2的一个子集,是移动版本的CSS样式表二.wap手机网页css(wap css) wap手机网页css(wap css)大部分手机现在都支持XHTML浏览器,这意味着我们

webapp中<meta>与css代码部署

1.页面头部标签申明 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" id="test"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta nam

css页面样式初始化

为什么? 同一个样式,在各个浏览器的默认样式可能不同,所以需要统一初始化,同一个页面在不同浏览器能正常显示. @charset "utf-8"; /*css reset*/ body{font:14px/24px "\5FAE\8F6F\96C5\9ED1","\5b8b\4f53",arial;color:#484848} body,div,dl,dd,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,le

IE、FF、Safari、OP不同浏览器兼容报告

IE.FF.Safari.OP不同浏览器兼容报告 1 浏览器内核简介 Trident IE浏览器(GreenBrowser绿色浏览器, 遨游浏览器....都是IE) Geckos FireFox Presto Opera Webkit Safari.Chrome 浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“解释引擎”,不过我们一般习惯将之称为“浏览器内核”.负责对网页语法的解释(如HTML.JavaScript)并渲染(显示)网页. 所以,通常

微信JS-SDK实际分享功能

为了净化网络,整顿诱导分享及诱导关注行为,微信于2014年12月30日发布了<微信公众平台关于整顿诱导分享及诱导关注行为的公告>,微信平台开发者发现,原有的微信分享功能不能用了,在iphone手机上,显示为当前页的链接,之前设置的图标和标题等都没有了.虽然在部分android手机上还可以用,但最近微信升级后,分享功能也不正常了.正在苦于微信分享该怎么解决时,微信于2015年1月10日即时发布了开放JS-SDK,为微信网站的开发提供了强大的js功能.这里仅就分享功能的使用进行一些描述. 微信JS

移动端web app开发学习笔记

移动web和pc端web以及web app 移动web开发跟web前端开发差别很小,使用的技术都是html+css+js.手机网页可以理解成pc网页的缩小版加一些触摸特性.在浏览器中进行的网页开发,最终代码具有跨系统平台的特性. web app开发特指的是用html5技术开发,之所以叫web app是因为它与客户端应用程序很相似,可以和系统深度融合,调用一些只有客户端才能调用的功能(利用html5开发出的网页可以访问电话.相机等功能). 进行移动端web开发要在头部添加这样一段代码 <meta

jquery.mobile 中 collapsible-set collapsible listview 共同布局问题

最近项目用上了jquery.mobile这货,在手机上做点简单的显示.之前只知道有这个框架,没把玩过. 特别是事件绑定方面,相比桌面系统下浏览器用着各种不爽,不得要领. 如下图,在做后台系统时,一般左侧都是一个个模块及下属菜单项,可展开折叠. 我的问题卡在了累计评价这块,为了页面复用,累计评价中嵌套了iframe做评论显示. 第一槛有过移动WEB开发的同学应该知道,IOS浏览器下iframe中内容过多时,滚动条时不会出现的,内容好像被截断了. 查资料最终搞定,手机屏毕竟小,评论多的时候不可能像

下拉刷新，上拉加载功能--dropload.js的使用

这段时间工作太忙了,没时间更新博客内容,在这段时间,也学习到了不少新的知识.今天先整理一下dropload.js的使用方法吧,这个是在为项目中使用过的插件,很好用,但是真正用到项目中还是会有一些小小的问题,这个要具体问题具体分析了. 插件下载地址:https://github.com/ximan/dropload.大家也可以直接看源码我的代码地址: https://github.com/dreamITGirl/projectStudy,大家可以在里面查找. 首先,这个插件是依赖于

css实现PC16px,手机14px

热门专题